How to change the highlights for selected text and

Question

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.

Answer 1

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 + , (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

Answer 2

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.