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) =
- RGB Color, e.g.
-
+
- Transparency (00 to FF), e.g. 2a
BEFORE:
AFTER:
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:
Open the settings.json file (see below for location of this file)
Add a comma to the last entry (before the closing brace
}
)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:
Ctrl + , (comma) to open Settings
Workbench
Settings Editor
In the search box at top, paste-in
workbench.colorCustomizations
On the left, click
Workbench
and thenAppearance
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