24

I know how to install and switch different color themes (like "dark-plus" etc.).

I also found out how to modify settings in settings.json):

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

But 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 darkest 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.

4
  • 1
    Isn't it just editor.foreground? On my phone, can't check
    – Mark
    Commented Dec 12, 2018 at 2:51
  • 1
    @Mark editor.foreground didn't make any change for me. That is, I tried combinations like: 1.) "editor.tokenColorCustomizations": { "[dark-plus-syntax]": { "editor.foreground": "#FF0000" } 2.) "workbench.colorCustomizations": { "editor.foreground": "#FF0000" } in the settings.json... But I'm a bit confused, where to place lines like that. Maybe I'm missing something essential here. But didn't find any useful information on the "help"-pages of visual studio code - all either extremely basic or just hinting at things :-/ Commented Dec 12, 2018 at 6:10
  • Okay, I tried editor.foreground and it doesn't do much presumably because almost everything is overridden with the theme syntax colors. So, for instance, variables or functions keywords, strings, etc. all get their colors from the theme syntax rules not editor.foreground. So I think what you are trying to do is not possible unless you find a theme that doesn't actually have syntax coloring rules. There must be some out there.
    – Mark
    Commented Dec 12, 2018 at 6:44
  • 1
    Thanks for putting some light onto this! :) I'm still confused: Asuming a theme is overriding everything (making editor.foreground useless): I have a file open and try to change the rather bright white text [e.g. in dar-plus-theme]. => There should be a syntax token somewhere in the theme.json-file, that changes this white text? But that doesn't seem to be the case. Really strange... :-| [I'm still surprised, that there is such a lot of material on the visual-studo-code help-pages, but nothing on default font color - which is one of the most basic and common tweaks in my opinion?] Commented Dec 12, 2018 at 11:09

2 Answers 2

35

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:

Screenshot: cout identifier, before customization

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:

Screenshot: cout identifier, after customization

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

Screenshot: less-less operator, before customization

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:

Screenshot: less-less operator, after customization

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.

0
16

The following worked for me:

  1. In settings.json:
"workbench.colorCustomizations": { 
    "editor.foreground": "#aabbcc" 
}
  1. Save settings.json

  2. 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
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.