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

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