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

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


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.


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