CODEWITHSUNDEEP
editorvisual-studio-code
Dave Everitt
Dave Everitt

Reputation: 17856

How to change the highlights for selected text and selection/word matches in VS Code?

Visual confusion: 'selected text' and 'selection matches' highlight color

As a daily VS Code user I found an earlier closed issue (Selection and selection matches highlight color #1636) about this - i.e. if you actually select some text it's highlighted, but the highlight colour is all but indistinguishable from the highlight used for matched code or the same word.

A local user settings-like CSS override?

If the system-wide highlight colour (when selecting any text system-wide) isn't portable to VS Code, I need a way to edit it. Perhaps in the theme's CSS or - preferably - in a user-generated 'override css' file or something (like VS Code's user settings). Is this in the pipeline? If not, does anyone have a fix?

ATM changing the highlight colour for selected text appears to be impossible. I'm using 'Dark', but the issue is the same no matter which theme.

Upvotes: 36

Views: 28417

Answers (4)

cssyphus
cssyphus

Reputation: 40028

To fill-in a couple of missing steps:

  1. Open the settings.json file (see below for location of this file)

  2. Add a comma to the last entry (before the closing brace })

  3. Paste-in:

    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#e788ff", //Current SELECTED text
        "editor.selectionHighlightBackground": "#ff0000", //same content as the selection
        "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
        "editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
    }

###Example of a typical settings file, post mod:

    {
        "git.enableSmartCommit": true,
        "git.autofetch": true,
        "breadcrumbs.enabled": true,
        "git.confirmSync": false,
        "explorer.confirmDelete": false,
        "code-runner.saveFileBeforeRun": true,
        "code-runner.saveAllFilesBeforeRun": true,
        "workbench.activityBar.visible": true,
        "files.trimTrailingWhitespace": true,
        "telemetry.enableTelemetry": false,
        "workbench.colorCustomizations": {
            "editor.selectionBackground": "#e788ff7c", //Current selected text
            "editor.selectionHighlightBackground": "#ff00005b", //Same content as selection
            "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
            "editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
        }
    }

##Where to find the settings.json file:

Depending on your platform, the user settings file is located here:

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

##ALTERNATE method to open the settings.json file:

  1. CTRL+SHIFT+P type settings.json, select Preferences: Open user settings (JSON)

or

  1. Ctrl + , (comma) to open Settings

  2. Workbench

  3. Settings Editor

  4. In the search box at top, paste-in workbench.colorCustomizations

  5. On the left, click Workbench and then Appearance

  6. Click the link to right: Edit in settings.json

References:

https://code.visualstudio.com/api/references/theme-color#editor-colors

https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

https://code.visualstudio.com/docs/getstarted/settings

Upvotes: 46

Fattie
Fattie

Reputation: 12582

The critical answer!

https://stackoverflow.com/a/45640244/294884

The settings you want:

these two setting names:

enter image description here

are these two colors:

enter image description here

What is each item? Huge tip!

There's an incredibly useful mouseover tooltip in the settings.json editor:

Notice it explains at length exactly what the setting does!

enter image description here

How to edit these, in current (2020) VSCode ?

One of the joys of VSCode is that preferences are so easy. (In VS, it is a nightmare.)

Just click Settings, and then just click this:

enter image description here

Upvotes: 3

Jaider
Jaider

Reputation: 14874

I was using Night Owl theme by sarah.drasner, for VSCode and by default the text-selection will be overpower by the word-selection, and I get confuse all the time if I really make a selection?.

Testing various variable... the one work for me was the word highlight background (you can try border).

"workbench.colorCustomizations": {
    "editor.wordHighlightBackground": "#0066ff2a",
    "editor.wordHighlightStrongBackground": "#0066ff2a",
}

One think I want to clarify you need the 2 values (like rgba) =

  1. RGB Color, e.g. enter image description here
      +
  2. Transparency (00 to FF), e.g. 2a

BEFORE: enter image description here

AFTER: enter image description here

More info: https://code.visualstudio.com/api/references/theme-color#editor-colors

Upvotes: 15

Mark
Mark

Reputation: 180657

Now there are many color customizations that can be done to vscode, including the selection options:

editor.selectionBackground: Color of the editor selection.
editor.selectionHighlightBackground: Color for regions with the same content as the selection.
editor.inactiveSelectionBackground: Color of the selection in an inactive editor.

See vscode theme color options available from about v1.13 I believe.

Upvotes: 16

Related Questions