Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modify editor text color in visual studio code?

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

like image 573
Florian Zeitblom Avatar asked Dec 12 '18 02:12

Florian Zeitblom


Video Answer


1 Answers

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.

like image 143
Scott McPeak Avatar answered Sep 24 '22 06:09

Scott McPeak