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?

Solution 1

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.)

Solution 2

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

Solution 3

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

Solution 4

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.

Solution 5

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:

View more solutions

Comments

[duyn9uyen]

Visual Studio Code, not VS 2013, 2015, etc.

[Alex]

Obsolete.

[Matt Bierner]

Updated to reference Jakub Zawiślak's answer for modern versions of VSCode

[sleighty]

Is there any way to change the text color? Otherwise you have to find a background color that maintains readability when paired with every single color in your color scheme. This is one of two issues that unfortunately keep me from using VS Code...

[Tobia]

@BrunoBEly If you open "workbench.colorCustomizations": {} then start typing "editor.selection, the autocomplete menu will suggest all possible keys and their explanation, including the selection foreground.

[sleighty]

@Tobia thanks for the tip! I found it, but am probably doing something wrong. I set both background and foreground to red, but only background seems to work (I'm using VS Code 1.18.0)

[giovannipds]

Can't put red or white as values.

[Rizwan]

giovannipds, its just name to show, that you can add any color Name, its not value

[giovannipds]

That's code, so it's wrong. red and white are web colors, so that can confuses people..

[MaylorTaylor]

This should be the answer. These are the settings used in VSCode version 1.3+

[havlock]

editor.lineHighlightBackground doesn't seem to be there anymore, and I think that they're saying it was intentionally removed: github.com/dracula/visual-studio-code/issues/68

[FujiRoyale]

that very well could be.

[Ryan Weiss]

Thanks, been trying to find this for days, no one ever mentioned wordHighlightBackground!

[Neil Gaetano Lindberg]

I found these also useful in conjunction with this answer to find matches at a glance. Note the support for RGBA (in my use, the 75 alpha setting at the end of the color values: "editor.wordHighlightBorder": "#00ff0075", "editor.findMatchHighlightBorder": "#00ff0075"

[Nico Butler]

This should be marked as the answer. 10 second fix!

[JinSnow]

for the terminal: "terminal.selectionBackground": "#f1eeb3a9",

[jrh]

This does not seem to work for Python, setting selectionHighlightBackground does not seem to affect what color vscode uses when highlighting uses of a variable or function (for example)

[Ben]

@jrh Try using editor.wordHighlightBackground to change the background color that is used for highlighting variables or functions. Works for me for C#, not sure about Python though.

[jerclarke]

The long descriptions don't really match what I'm seeing, but the list here is what I needed. Helped me style all the important "selection" colors that I wanted.

[jerclarke]

actually to be complete this should also add: "editor.findMatchBackground" and "editor.findMatchHighlightBackground"

[zipzit]

VS Code --> File --> Preferences --> Settings, then search for "workbench.colorCustomizations"... copy, paste, done!

[Tomer Shetah]

Hello and welcome to SO! Please read the tour, and How do I write a good answer? Please consider adding a code snippet to show how to use this extension and elaborate how it solves the question.