Update visual mode cursors:

- Removes the hardcoded cursor colors used in visual mode, now it uses
the css 'mix-blend-mode: difference' property to make the color be the
opposite of the block cursor color. This is the same
thing vscode does, except they actually calculate the value instead of
using the css property. The result however is the same color.

src/configuration/decoration.ts

@@ -2,7 +2,7 @@ import * as vscode from 'vscode';
 import { IConfiguration } from './iconfiguration';
 
 class DecorationImpl {
-  private _default!: vscode.TextEditorDecorationType;
+  private _visualModeCursor!: vscode.TextEditorDecorationType;
   private _searchHighlight!: vscode.TextEditorDecorationType;
   private _easyMotionIncSearch!: vscode.TextEditorDecorationType;
   private _easyMotionDimIncSearch!: vscode.TextEditorDecorationType;
@@ -30,15 +30,15 @@ class DecorationImpl {
     });
   }
 
-  public set default(value: vscode.TextEditorDecorationType) {
-    if (this._default) {
-      this._default.dispose();
+  public set visualModeCursor(value: vscode.TextEditorDecorationType) {
+    if (this._visualModeCursor) {
+      this._visualModeCursor.dispose();
     }
-    this._default = value;
+    this._visualModeCursor = value;
   }
 
-  public get default() {
-    return this._default;
+  public get visualModeCursor() {
+    return this._visualModeCursor;
   }
 
   public set searchHighlight(value: vscode.TextEditorDecorationType) {
@@ -128,18 +128,14 @@ class DecorationImpl {
   }
 
   public load(configuration: IConfiguration) {
-    this.default = vscode.window.createTextEditorDecorationType({
+    this.visualModeCursor = vscode.window.createTextEditorDecorationType({
       backgroundColor: new vscode.ThemeColor('editorCursor.foreground'),
-      borderColor: new vscode.ThemeColor('editorCursor.foreground'),
-      dark: {
-        color: 'rgb(81,80,82)',
-      },
-      light: {
-        // used for light colored themes
-        color: 'rgb(255, 255, 255)',
-      },
-      borderStyle: 'solid',
-      borderWidth: '1px',
+      // We make the color of text 'white' -> rgb(255,255,255), because when using the mix-blend-mode
+      // with 'difference' it subtracts the darker color from the lightest color which means we will
+      // subtract the 'editorCursor.foreground' from 'white' (255,255,255) leaving us with the opposite
+      // color of 'editorCursor.foreground'. This is the same thing that vscode does! So the color
+      // should be very similar to vscode's block cursor.
+      color: 'white; mix-blend-mode: difference;',
     });
 
     const searchHighlightColor = configuration.searchHighlightColor

src/mode/modeHandler.ts

@@ -1389,11 +1389,11 @@ export class ModeHandler implements vscode.Disposable, IModeHandler {
     }
     this.vimState.editor.options.cursorStyle = cursorStyle;
 
-    // cursor block
+    // Visual mode cursor block
     const cursorRange: vscode.Range[] = [];
     if (
       getCursorType(this.vimState, this.currentMode) === VSCodeVimCursorType.TextDecoration &&
-      this.currentMode !== Mode.Insert
+      isVisualMode(this.currentMode)
     ) {
       // Fake block cursor with text decoration. Unfortunately we can't have a cursor
       // in the middle of a selection natively, which is what we need for Visual Mode.
@@ -1412,7 +1412,7 @@ export class ModeHandler implements vscode.Disposable, IModeHandler {
       }
     }
 
-    this.vimState.editor.setDecorations(decoration.default, cursorRange);
+    this.vimState.editor.setDecorations(decoration.visualModeCursor, cursorRange);
 
     // Insert Mode virtual characters: used to temporarily show the remapping pressed keys on
     // insert mode, to show the `"` character after pressing `<C-r>`, and to show `?` and the