On the menu bar, which is the row of menus such as File and Edit, choose Tools > Options. On the Environment > General options page, change the Color theme selection to Dark, and then choose OK. The color theme for the entire Visual Studio development environment (IDE) changes to Dark.
Open VS Code editor to change the syntax colors. Go to Settings, which is on the bottom left corner of the VS Code window. In the search field type JSON, and click on the 'Edit in settings. json' option.
On windows hold down Ctrl + Shift and on mac Command + Shift, then press the key P.
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 then Appearance
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
If anyone finds this and, like me, was unable to get the above config working try doing this.
Be sure to replace the #'s with colors you want to see.
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#<color1>",
"editor.selectionBackground": "#<color2>",
"editor.selectionHighlightBackground": "#<color3>",
"editor.wordHighlightBackground": "#<color4>",
"editorCursor.foreground": "#<color5>"
},
My understanding of the above config.
editor.lineHighlightBackground - when you click on a line this is the color the line background will be.
"editor.selectionBackground" - The background of the word you have selected with your cursor.
"editor.selectionHighlightBackground" - This is the background of selections elsewhere in the file which matches the word you have selected with your cursor. Think of a variable named foo and it's used all over a file. You then select one 'foo' with your cursor, and all the other 'foo' on the page will be of the color specified in this variable.
"editor.wordHighlightBackground" - This is the color of selected text if the default highlight word on click does not take effect. I've only seen this value make a difference if you click on a word that does not auto-select.
editorCursor.foreground - this is the color of your cursor.
As I have tested, setting border color makes it easier to read than setting background color, which is what Sublime Text does.
For example, add these lines in settings.json
:
"workbench.colorCustomizations": {
"editor.selectionHighlightBorder": "#FFFA",
},
Selected words will be displayed like this:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With