Modify editor text color in visual studio code?

Question

Maybe someone can help me with a little problem in Visual Studio Code, which drives me crazy... ;-/ ...

• I know how to install and switch different color themes (like "dark-plus" etc.).
• I found out how to modify things like (in settings.json):

editor.tokenColorCustomizations": { "[dark-plus-syntax]": { "comments": "#649664" }

But all my googling didn't reveal the most basic modification thinkable: How do I only change the standard editor font color?

Any idea how to do this easily? I want to darken the bright font color of most dark color themes just a little bit to reduce the contrast/eye strain....

I tried to modify the corresponding file (e.g. dark-plus-syntax-color-theme.json), but found nothing in it for just the default font color.

[NB: I think it's almost a bit absurd, that I found out - while googling for an hour - all kinds of ways how to customize... but not this most simple tweak.]

Solution 1

Let's be specific, and try to change the "normal" text color for identifiers, etc., in a C++ source file when using the "Dark+" theme. In my setup, these identifiers have the color "#D4D4D4" (light gray, as RRGGBB). For demonstration purposes I'll change it to "#080" (medium green, as RGB).

Start by opening a C++ source file. Open the Command Palette (Ctrl+Shift+P) and run the "Developer: Inspect TM Scopes" command.

Edit 2020-08-04: As of VSCode 1.47.2 (and perhaps a bit earlier), the command is now called "Developer: Inspect Editor Tokens and Scopes".

After invoking that command, move the cursor to an identifier. For example:

In this case, we notice it says "No theme selector." That means the tokenColors attribute of the theme is not setting this color, rather it is the ordinary colors attribute of the theme, specifically the editor.foreground color. This can be overridden as in Sean's answer by setting workbench.colorCustomizations in settings.json:

    "workbench.colorCustomizations": {
        "editor.foreground": "#080"
    },

Save settings.json and return to the C++ source file. It now looks like this:

Ok, that's progress, but the operators still have their original color. Use "Developer: Inspect Editor Tokens and Scopes" again:

This time, instead of "No theme selector.", we see:

  keyword.operator { "foreground": "#d4d4d4" }

That is a rule from the theme's tokenColors attribute and we need to override that using textMateRules in settings.json:

    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    "keyword.operator",
                ],
                "settings": {
                    "foreground": "#080",
                },
            },
        ],
    },

Now the operators are also green:

Repeat the procedure as needed until all colors are overridden.

If you want to make more complex changes (like changing only certain operator colors), I recommend reading the TextMate Scope Selectors manual. That's where the "scope label stack" would be useful. But be aware that VSCode does not implement exactly what is described there (although it is close), and what it does implement is not documented.

The capabilities of the settings attribute are not well documented, but basically you can set the foreground color and the fontStyle, only. The fontStyle can be any space-separated combination of bold, italic, and underline. You cannot set the background color, unfortunately.

Solution 2

The following worked for me:

1. In settings.json:

"workbench.colorCustomizations": { 
    "editor.foreground": "#aabbcc" 
}

2. Save settings.json

3. Choose a different color theme. All you need to do is open the selector menu and navigate to a different theme. As soon as I did this, the foreground customization took effect.

System info:

• OS X 10.14.4
• VSCode 1.33.1

Comments

[carloswm85]

You'll need a color picker: google.com/search?q=color+picker+hex Lol. By the way, I appreciate this short answer to the problem.