Change highlight text color in Visual Studio Code
Add the following lines into "Editor: Token Color Customizations" setting, inside settings.json file.
"workbench.colorCustomizations": {
"editor.selectionBackground": "#135564",
"editor.selectionHighlightBackground": "#135564"
},
See Theme Color Reference for more options
The above answers cover the Selected text
and areas with same content as selection
, but they miss the Current Search Match
and Other Search Matches
-- which have the same problem.
"workbench.colorCustomizations": {
"editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
"editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
}
Note that the above settings will also affect the colors when using Change All Occurrences CtrlF2 (a super-useful command that intelligently selects all occurrences of a string, placing cursors at each location for multiple-instance editing).
UPDATEs:
For those using the popular extension Numbered Bookmarks - you can now change the background color of bookmarked lines - makes it über-easy to notice them. (Have you ever wanted a way to temporarily mark line(s) in your code, as with a highlighter on paper?) Add this line to your settings.json (also under workbench.colorCustomizations):
"numberedBookmarks.lineBackground": "#007700"
And don't miss Henry Zhu's useful tip here. I added Henry's tip to the settings above, and find the overall effect improved. (Henry's tip is not included within this answer - please click the link to read Henry's additional tip)
Tom Mai adds via a comment:
Make sure both colors for
editor.findMatchBackground
andeditor.findMatchHighlightBackground
have transparency (or have some alpha values), in order foreditor.selectionBackground
andeditor.selectionHighlightBackground
to show through the searches. You can keep both colors,editor.selectionBackground
andeditor.selectionHighlightBackground
, non-transparent (without alpha values) to an extent, and it works flawlessly
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, "scm.providers.visible": 0, //0 allows manual resize of the Source Control panels "editor.renameOnType": true, //Added Aug 2020: renames matching HTML tags "workbench.colorCustomizations": { "editor.selectionBackground": "#e788ff7c", //Currently SELECTED text "editor.selectionHighlightBackground": "#ff00005b", //Same content as selection "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH "editor.findMatchHighlightBackground": "#ff7b00a1", //Other SEARCH MATCHES "numberedBookmarks.lineBackground": "#007700" //Henry's tip goes here... (don't forget to add comma to line above) } }
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