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?

(For Future Visitors) Also if you need to _disable_ any of these vscode theme colors altogether, you will have to make them _transparent_ using the two extra `00` hex bits at the end of the color code. E.g., to disable the line highlight background, use: `"editor.lineHighlightBackground": "#ffffff00",`. — aderchox, Aug 21 '21 at 13:21
Useful link to copy and paste into User Settings: https://gist.github.com/dcts/5b2af4c8b6918e7d35c4121f11d49fb1 — Ricardo, Feb 08 '22 at 18:44
So many highlight plugins available... here's a nice one: [highlight-icemode](https://marketplace.visualstudio.com/items?itemName=iceliu.highlight-icemode) — Noam Manos, Apr 24 '22 at 18:27

score 435 · Answer 1 · edited Apr 09 '19 at 01:16

435

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

edited Apr 09 '19 at 01:16

eduardosufan

1,441
2
23
51

answered Apr 25 '17 at 08:45

Jakub Zawiślak

5,122
2
16
21

12

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... – sleighty Oct 05 '17 at 20:11
Maybe this will help you - [Customize a Color Theme](https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme) – Jakub Zawiślak Oct 05 '17 at 20:31
7

@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. – Tobia Nov 02 '17 at 14:59
3

@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](https://imgur.com/nCLnFyv) (I'm using VS Code 1.18.0) – sleighty Nov 15 '17 at 20:00
Most of the colors are already used in the editor's text, you can use the transparency property in order to still be able to distinguish the text from the highlighted background – Snake Sanders Aug 07 '18 at 16:45
1

It stands out better if you set the highlight border color as in @HenryZhu answer below. https://stackoverflow.com/a/56625325/3585500 – ourmandave Aug 08 '19 at 16:00
@JakubZawiślak, how about with opacity/transparency? – Artanis Zeratul Sep 02 '19 at 02:35
Note that `editor.selectionBackground` is for the background behind text that you highlighted (e.g., by clicking and dragging to select with the mouse) whereas `editor.selectionHighlightBackground` is the background color that VSCode applies on text that it matches automatically when you e.g., click on an identifier. – jrh Jan 27 '20 at 16:04
4

for the terminal: `"terminal.selectionBackground": "#f1eeb3a9",` – JinSnow Mar 21 '20 at 07:31
2

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) – jrh Jun 29 '20 at 20:53
1

@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. – Ben Jul 05 '20 at 06:02
@Ben Thanks, but unfortunately that did not seem to work. It's still showing Python references (not word matching) in that same neutral gray color that I have a hard time seeing after changing the color. – jrh Jul 29 '20 at 18:22
Worked for me and really helps to understand code. – RicHincapie Dec 02 '20 at 17:20
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. – tom_mai78101 Jun 23 '21 at 14:42
it worked. But now i want to change opacity – Berk Kanburlar Jan 31 '22 at 14:06

cssyphus · Answer 2 · 2021-06-23T17:22:41.183

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:

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

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"``` — Neil Gaetano Lindberg, Oct 17 '19 at 16:15
Anyone knows how this is possible for the matches in the terminal search? — holzkohlengrill, Jul 27 '20 at 14:46
Thank you for this. Instead of using `editor.findMatchBackground`, I ended up using `editor.findMatchBorder`, which I set to `#ff0000` (red). — Tahir Hassan, Nov 24 '20 at 19:55
Hi cssyphus. I appreciate you wanting to encourage upvoting here, but most readers don't even sign in or have an account, so it is really advice for quite a small audience. Since it is meta-advice not relating to the technical content, my advice as an editor is to remove it. I think we can assume that readers who are signed in will know how to upvote (and if we find specific people that do not know this, we can advise them in the comments). — halfer, Dec 04 '20 at 15:28
Feel free to open a chat with me if you'd like to explore more on this theme. — halfer, Dec 04 '20 at 15:29
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. — tom_mai78101, Jun 23 '21 at 14:41
@tom_mai78101 Thanks for the tip, Tom! (Added to answer, credits to you) — cssyphus, Jun 23 '21 at 17:07

score 41 · Answer 3 · edited Nov 17 '20 at 12:59

41

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

go to file > Preferences > settings
type in the search Editor token color customizations
under the Editor token color customizations header
click on edit in settings.json
on the right hand column select user settings
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.

edited Nov 17 '20 at 12:59

Magne

16,401
10
68
88

answered Dec 14 '18 at 08:35

FujiRoyale

762
10
26

2

This should be the answer. These are the settings used in VSCode version 1.3+ – MaylorTaylor May 01 '19 at 15:33
editor.lineHighlightBackground doesn't seem to be there anymore, and I think that they're saying it was intentionally removed: https://github.com/dracula/visual-studio-code/issues/68 – havlock Jul 04 '19 at 07:27
that very well could be. – FujiRoyale Jul 16 '19 at 19:00
1

Thanks, been trying to find this for days, no one ever mentioned wordHighlightBackground! – Ryan Weiss Aug 15 '19 at 20:15
This should be marked as the answer. 10 second fix! – Nico Butler Dec 13 '19 at 12:05
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 Jul 20 '20 at 14:42
actually to be complete this should also add: "editor.findMatchBackground" and "editor.findMatchHighlightBackground" – jerclarke Jul 20 '20 at 14:47

score 37 · Answer 4 · answered Jun 17 '19 at 05:46

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:

Rizwan · Answer 5 · 2021-07-02T09:31:28.643

30

you can change it with your favorite color by:

Steps

Open visual code
Goto file menu
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
},

edited Jul 02 '21 at 09:31

answered Mar 10 '18 at 22:53

Rizwan

3,741
2
25
22

Can't put `red` or `white` as values. – giovannipds Oct 01 '18 at 15:22
1

giovannipds, its just name to show, that you can add any color Name, its not value – Rizwan Oct 02 '18 at 21:54
1

That's code, so it's wrong. `red` and `white` are web colors, so that can confuses people.. – giovannipds Oct 05 '18 at 19:04
3

VS Code --> File --> Preferences --> Settings, then search for "workbench.colorCustomizations"... copy, paste, done! – zipzit Oct 08 '20 at 02:34

score 16 · Accepted Answer · edited Dec 01 '19 at 16:26

16

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

edited Dec 01 '19 at 16:26

Heraldmonkey

2,111
2
19
29

answered Mar 10 '16 at 23:33

Matt Bierner

58,117
21
175
206

5

***Obsolete***. – Alex Jul 17 '17 at 16:04
4

Updated to reference Jakub Zawiślak's answer for modern versions of VSCode – Matt Bierner Jul 17 '17 at 16:53

score 5 · Answer 7 · answered Jan 08 '19 at 14:32

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.

score 2 · Answer 8 · edited Jan 30 '21 at 20:58

2

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!

edited Jan 30 '21 at 20:58

AzizAhmad

637
1
9
20

answered Jan 28 '21 at 15:12

mweyburne

21
2

1

Hello and welcome to SO! Please read the [tour](https://stackoverflow.com/tour), and [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) Please consider adding a code snippet to show how to use this extension and elaborate how it solves the question. – Tomer Shetah Jan 28 '21 at 15:34

score 0 · Answer 9 · answered Nov 01 '22 at 17:22

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
        }

score 0 · Answer 10 · answered Feb 27 '23 at 18:40

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"
    }
}

Change highlight text color in Visual Studio Code

10 Answers10

Linked