Change highlight text color in Visual Studio Code

Question

Right now, it is a faint gray overlay, which is hard to see. Any way to change the default color?

Answer 1

This Q&A seems to have evolved into a canonical and the information here is quite scattered and incomplete (there are several different types of highlighting in VS Code!). This is an attempt to defragment/unify/fill.

In general, use subproperties of the workbench.colorCustomizations setting in a settings.json file. You can write colours in the following forms:

"workbench.colorCustomizations": {
    "[Theme Name Goes Here]": { // apply to specific theme. remove this wrapper object to apply to all themes
        // (using the colour red as an example)
        // "selection.background": "#f00",      // #RGB      (red, green, blue)
        // "selection.background": "#ff0000",   // #RRGGBB   (red, green, blue)
        // "selection.background": "#f008",     // #RGBA     (red, green, blue, alpha/opacity)
        // "selection.background": "#ff000080", // #RRGGBBAA (red, green, blue, alpha/opacity)
    },
},

See also the list of supported colour formats (already exemplified above).

To make something transparent, set the opacity to zero.

I'll generally only list the "Background" customization point, but know that for many of these, there is a corresponding "Foreground" customization point to change the colour of the text itself, and sometimes even a customization point for borders. Note that you can find most of these yourself by triggering suggestions after typing "highlight.background" in a settings.json file inside the workbench.colorCustomizations object where a new object key should go.

Colour Customization Point ID	Description (quoting from tooltip description)	Additional Notes
selection.background	The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
⭐ editor.lineHighlightBackground	Background color for the highlight of line at the cursor position.	See also the editor.renderLineHighlight and editor.renderLineHighlightOnlyWhenFocus settings.
editor.rangeHighlightBackground	Background color of highlighted ranges, like by quick open and find features. The color must not be opaque so as not to hide underlying decorations.
editor.selectionForeground	Color of the selected text for high contrast.
⭐ editor.selectionBackground	Color of the editor selection.
editor.inactiveSelectionBackground	Color of the selection in an inactive editor. The color must not be opaque so as not to hide underlying decorations.
⭐ editor.selectionHighlightBackground	Color for regions with the same content as the selection. The color must not be opaque so as not to hide underlying decorations.	See also the editor.selectionHighlight setting
⭐ editor.wordHighlightBackground	Background color of a symbol during read-access, like reading a variable. The color must not be opaque so as not to hide underlying decorations.	See also the editor.occurrencesHighlight setting
editor.wordHighlightStrongBackground	Background color of a symbol during write-access, like writing to a variable. The color must not be opaque so as not to hide underlying decorations.
editor.hoverHighlightBackground	Highlight below the word for which a hover is shown. The color must not be opaque so as not to hide underlying decorations.
⭐ editor.findMatchBackground	Color of the current search match.
⭐ editor.findMatchHighlightBackground	Color of the other search matches. The color must not be opaque so as not to hide underlying decorations.	Applies for editor find widget and Search View matches, and also to highlighting list items in the Search View
editor.findRangeHighlightBackground	Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations.
terminal.findMatchBackground	Color of the current search match in the terminal. The color must not be opaque so as not to hide underlying terminal content.
terminal.findMatchHighlightBackground	Color of the other search matches in the terminal. The color must not be opaque so as not to hide underlying terminal content.
terminal.hoverHighlightBackground	Border color of the other search matches in the terminal.
searchEditor.findMatchBackground	Color of the Search Editor query matches.	what's a search editor?
editor.symbolHighlightBackground	Background color of highlighted symbol, like for go to definition or go next/previous symbol. The color must not be opaque so as not to hide underlying decorations.
editor.wordHighlightTextBackground	Background color of a textual occurrence for a symbol. The color must not be opaque so as not to hide underlying decorations.
notebook.symbolHighlightBackground	Background color of highlighted cell
peekViewEditor.matchHighlightBackground	Match highlight color in the peek view editor.
peekViewResult.matchHighlightBackground	Match highlight color in the peek view result list.
editorBracketMatch.background	Background color behind matching brackets
editorUnicodeHighlight.background	Background color used to highlight unicode characters.
editor.linkedEditingBackground	Background color when the editor auto renames on type.

If you want to copy paste a skeleton:

"workbench.colorCustomizations": {
    // "selection.background": "#ff000040",
    "editor.lineHighlightBackground": "#ff000040",
    // "editor.rangeHighlightBackground": "#ff000040",
    // "editor.selectionForeground": "#ff000040",
    "editor.selectionBackground": "#ff000040",
    // "editor.inactiveSelectionBackground": "#ff000040",
    "editor.selectionHighlightBackground": "#ff000040",
    "editor.wordHighlightBackground": "#ff000040",
    // "editor.wordHighlightStrongBackground": "#ff000040",
    // "editor.hoverHighlightBackground": "#ff000040",
    "editor.findMatchBackground": "#ff000040",
    "editor.findMatchHighlightBackground": "#ff000040",
    // "editor.findRangeHighlightBackground": "#ff000040",
    // "terminal.findMatchBackground": "#ff000040",
    // "terminal.findMatchHighlightBackground": "#ff000040",
    // "terminal.hoverHighlightBackground": "#ff000040",
    // "searchEditor.findMatchBackground": "#ff000040",
    // "editor.symbolHighlightBackground": "#ff000040",
    // "editor.wordHighlightTextBackground": "#ff000040",
    // "notebook.symbolHighlightBackground": "#ff000040",
    // "peekViewEditor.matchHighlightBackground": "#ff000040",
    // "peekViewResult.matchHighlightBackground": "#ff000040",
    // "editorBracketMatch.background": "#ff000040",
    // "editorUnicodeHighlight.background": "#ff000040",
    // "editor.linkedEditingBackground": "ff000040",
},

Answer 2

Remember there is also a setting for the "Inactive" selection, as VSC calls it, or "Unfocused" selection as it is typically called. This is the highlight color of the selected text when the another Window is focused:

    "editor.selectionBackground": "#1f587279",
    "editor.inactiveSelectionBackground": "#68686879",

Answer 3

I'm adding an answer in hopes this also helps someone. My specific gripe was the lack of contrast between the text you've selected in a partial word, and the rest of the word that auto-higlights. It became VERY difficult to see the difference between what I had selected and what VScode decided to add.

After playing around with the settings, I finally realized that the issue is that it's not using an entirely separate color to distinguish the two, but rather is layering one color on top of the other.

I'd say this decision was a mistake, but is what it is.

The trick: You need to pick colors that are a) transparent and b) when combined, creates a new color.

My example:

    "editor.wordHighlightTextBackground": "#ff00006b",
    "editor.selectionBackground": "#fffb00b4",
    "editor.background": "#222222"

The first color is a semi-transparent red. The second color is a semi-transparent yellow.

Now when I higlight a partial word, I see this:

Still not as ideal as being able to pick the specific color separately for each of these, but at least there's now a bit more color contrast and I at least know what I've highlighted.

Answer 4

For Aura theme:

I'm using Aura theme and I was having issues with soft highlighting on Aura Dark theme, so I change the colors like this:

"workbench.colorCustomizations": {
          "editor.selectionBackground": "#6cffd350",          // Current selection background.
          "editor.selectionHighlightBackground": "#6cffd320", // Same content as selection background.
          "editor.selectionHighlightBorder": "#6cffd370",     // Same content as selection border.
          "editor.findMatchBackground": "#ac82ff4f",          // Current search match background.
          "editor.findMatchHighlightBackground": "#ac82ff20", // Other search matches background.
          "editor.findMatchHighlightBorder": "#ac82ff70",     // Other search matches border.
          "bookmarks.lineBackground": "#156ad250"             // Bookmarks extension line background.
},

I also added a color to highlight the line when using Bookmarks extension.

Answer 5

Addition:

one can also make settings for a specific theme. See also the official documentation on themes customization.

This comes in handy if you sometimes switch between dark and light themes and you want to set different border colors respectively.

For example for a dark theme you want to set a brighter background or border color and for a light theme you want to set a dark color and you could also use wildcards for all dark themes (or at least those that have "dark" in their name):

"workbench.colorCustomizations": {
  "[Visual Studio Dark]": { "editor.selectionHighlightBorder": "#ffffff" },
  "[Visual Studio Light]": { "editor.selectionHighlightBorder": "#000000" },
  "[*dark*]": { "editor.selectionHighlightBorder": "#ffffff" }
}

Though I am not very sure if the wildcards are case sensitive and are now also valid for "Dark", you may try this out.

Another example, taken from the documentation:

"workbench.colorCustomizations": {
    "[Abyss][Red]": {
        "activityBar.background": "#ff0000"
    },
    "[Monokai*]": {
        "activityBar.background": "#ff0000"
    }
}

Answer 6

You can also change the border of the selection/search as well, see the below config that contains those and the other values found within this thread already:

"workbench.colorCustomizations": {
        "editor.selectionBackground": "#e788ff7c",
        "editor.selectionHighlightBackground": "#ff00005b",
        "editor.selectionHighlightBorder": "#fbf300e0", ##border when you select
        "editor.findMatchBackground": "#f352fe8f",
        "editor.findMatchHighlightBackground": "#8e52fe9e",
        "editor.findMatchHighlightBorder": "#fbf300e0" ##border when you search for something
        }

Answer 7

you can change it with your favorite color by:

Steps

1. Open visual code
2. Goto file menu
3. Preferences -> Settings

after open settings you will update your setting on your right side column, copy and paste this code inside the main brackets { ... }

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#f00", // red hexadecimal code
    "editor.selectionHighlightBackground": "#fff" // white hex code
},

Answer 8

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 and editor.findMatchHighlightBackground have transparency (or have some alpha values), in order for editor.selectionBackground and editor.selectionHighlightBackground to show through the searches. You can keep both colors, editor.selectionBackground and editor.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:

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

Answer 9

Have you tried using/adding extension Text Marker (Highlighter) by Ryuichi Inagaki ??

You can select/highlight a selection block, right click Toggle highlight to give it a unique color, then continue and repeat with other selection blocks, giving them each different distinct colors which I find most useful!

Answer 10

If anyone finds this and, like me, was unable to get the above config working try doing this.

1. go to file > Preferences > settings
2. type in the search Editor token color customizations
3. under the Editor token color customizations header
4. click on edit in settings.json
5. on the right hand column select user settings
6. paste this into the json object

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.

Answer 11

Update See @Jakub Zawiślak's answer for VScode 1.12+

---

Old answer

Visual Studio Code calls this selection highlighting and unfortunately, I don't think the color is customizable currently. Themes can control the 'selection' color, but the 'selection highlight' color is hardcoded.

See this issue tracking a possible solution: https://github.com/Microsoft/vscode/issues/1636

(As a side note, you can toggle this feature or/off with the editor.selectionHighlight setting.)

Answer 12

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:

Answer 13

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

Answer 14

If anyone found themselves reading @FujiRoyale's answer as none of the others worked, and wondered why his/her's also didn't work, but as it was more recent wondered why, I followed their answer, and had (with v1.18 of vscode) this as a user settings setup:

{
    // Is git enabled
    "git.enabled": true,
    // Path to the git executable
    "git.path": "C:\\Users\\t606964\\AppData\\Local\\Programs\\Git\\mingw64\\bin\\git.exe",
    "workbench.startupEditor": "newUntitledFile",
    // other settings
    //
    "editor.fontSize": 12,
    "editor.tabSize": 2,
    "git.confirmSync": false,
    "workbench.colorTheme": "Monokai",
    "editor.fontWeight": "bold",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDelete": false,
    "files.autoSave": "off",
    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#f00",
        "editor.selectionBackground": "#0f0",
        "editor.wordHighlightBackground": "#00f",
        "editorCursor.foreground": "#ff0"
    }
}

Note the indentation and commas and removal of double quotes from their answer (which I had to play with to get it right, which wasn't that clear from the answer). There should be no need to restart vscode, but it may be worth going to File > Autosave and see if you start getting primary colour highlights. And then choose better colours for your highlights.

You can also make this work in workspace settings by pasting

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#f00",
    "editor.selectionBackground": "#0f0",
    "editor.wordHighlightBackground": "#00f",
    "editorCursor.foreground": "#ff0"
}

in between the existing {} in that right-hand settings pane.