CODEWITHSUNDEEP
visual-studio-code
user1619524
user1619524

Reputation: 1624

How can I change cursor color in VSCode?

Is there a way to change the cursor colour in the Visual Studio Code editor window?

I am slightly colour blind, so I would like to change it from red to something else (yellow maybe) to improve accessibility and make it easier for me to read.

Upvotes: 71

Views: 54613

Answers (3)

johnlewisdesign
johnlewisdesign

Reputation: 21

Collating and expanding the above information from Nacimota to limit this to a typical custom VSC theme - or easily get to the setting, if unfamiliar with modifications.

In my case, GitLens' blame highlighting on the line wasn't contrasting enough with the Solarized Dark theme's red cursor, especially at higher resolution. This will replace it with a cyan cursor, which is much easier to spot.

Edit the settings.json file at

  • Mac ~/Library/Application Support/Code/User/settings.json
  • Windows %APPDATA%\Code\User\settings.json
  • Linux $HOME/.config/Code/User/settings.json

Or in the VSC settings GUI, search for token color customizations.

Click the link at Editor: Token Color Customizations, > Edit in settings.json. This will give you a choice of theme to apply your edit to. Mine was Solarized Dark.

This will now create a new block that you can modify.

Replace editor.tokenColorCustomizations with workbench.colorCustomizations in the newly created block - then you can add your values inside [your theme], which are

  • "editorCursor.background" : "#<your-hex-color>"
  • "editorCursor.foreground" : "#<your-hex-color>"

Before

"editor.tokenColorCustomizations": {
        
    }

After

"workbench.colorCustomizations": {
    "[Solarized Dark]": {
        "editorCursor.background": "#2efaa5",
        "editorCursor.foreground": "#2efaa5",
    }
}

Hit save, and your cursor will immediately change. If you want to affect all themes, send the values up one level and remove the now empty object, [your-theme].

Upvotes: 0

Mark
Mark

Reputation: 180695

With vscode v1.88 you can make the primary and all secondary cursors different colors. Use these colorCustomizations:

{
  "workbench.colorCustomizations": {
    
    "editorMultiCursor.primary.foreground": "#ff0000",
    // "editorMultiCursor.primary.background": "#ff0000",
    // "editorMultiCursor.secondary.background": "#00ff2a",
    "editorMultiCursor.secondary.foreground": "#e5ff00"
  }
}

These are active ONLY when there is more than one cursor. The primary is the first of multiple cursors you created. All multiple cursors other than the primary take the secondary color.

See Implement separate colors for primary and secondary cursors when multiple cursors are present.

Upvotes: 0

Nacimota
Nacimota

Reputation: 23225

Try adding this to your global preferences file:

"workbench.colorCustomizations": {
    "editorCursor.foreground": "#ffff00",
    "terminalCursor.foreground": "#ffff00"
}

Also worth noting that if you're colourblind, there are probably some colourblind-friendly themes for vscode out there, though I can't say I have looked for them myself.

Upvotes: 157

Related Questions