Customizing syntax highlighting in Visual Studio Code

Question

I'm currently trying to write an extension for a new file type (ANTLR) and wonder how to change the colors used for syntax highlighting in Visual Studio Code. To me it looks as if that is not defined in the extension, but somewhere else. There is no preferences entry for colors nor did I find a CSS file which defines that (which I'd expect since vscode is using Electron). I also looked through the settings file vscode generated and files that came with it, but no clue either. Neither did a web search help. So, I'm kinda lost now.

Can someone give me some hints or point me to the relevant docs?

Solution 1

There are two concepts at play here:

• language grammars, which turn a text file into tokens with different scopes, and
• themes, which colorize those scopes in a (hopefully) eye-pleasing way.

If you're writing your own grammar, or converting from TextMate etc., there's a chance you're using different scopes than the ones defined by the theme. In that case, there won't be a clear distinction between the tokens you define, even if they are actually defined.

There are two ways out of this. First one is, extend a theme with your custom scopes and colour them however you want. Not really a good way to go, unless everyone using your language also likes your colour scheme. The other is, use the (limited set of) scopes already defined and colorized by VSCode and the theme authors. Chances are, your language is going to look good in your theme of choice, and good enough in others.

To give you an example, here's the comment scope as defined by the default dark VSCode theme.

"name": "Dark Visual Studio",
"settings": [
    {
        "scope": "comment",
        "settings": {
            "foreground": "#608b4e"
        }
    },

and here's the equivalent language snippet from the C++ grammar:

"comments": {
    "patterns": [
        {
            "captures": {
                "0": {
                    "name": "punctuation.definition.comment.java"
                }
            },
            "match": "/\\*\\*/",
            "name": "comment.block.empty.java"
        },

Basically, the language defines multiple tokens under comment, as needed, and since the theme says that comment.* will be green, they all get colorized the same.

Solution 2

There is no need to patch the theme, from the official documentation:

To tune the editor's syntax highlighting colors, use editor.tokenColorCustomizations in your user settings settings.json file

Besides simple token customization you can fully override the TextMate rules with a slightly more complex setting, for example:

"editor.tokenColorCustomizations": {"textMateRules": [{
        "scope": "keyword.control.ref.latex",
        "settings": {
            "foreground": "#FF0000"
        }
    }]}

Solution 3

Syntax highlighting rules are stored in .plist files (or alternatively in .tmLanguage files). In those files different token types are declared for syntax highlighting:

• What is a keyword?
• What is a string literal?
• What is a comment?
• etc.

Take a look here to get more information about it: https://code.visualstudio.com/Docs/customization/colorizer

You do not define colors in .plist files!

The relation between token types and colors is done in color theme declarations.

Learn more about it here https://code.visualstudio.com/Docs/customization/themes and here How to add theme in Visual Studio Code?

In general this document is also helpful when you try to extend VSCode: https://code.visualstudio.com/docs/extensionAPI/overview

Solution 4

You might consider using a color theme

Since VSCode 1.44 (March 2020), you now have

Theme Support for Semantic Tokens

Color themes can now write rules to color semantic tokens reported by language extensions like TypeScript.

"semanticHighlighting": true,
"semanticTokenColors": {
    "variable.declaration.readonly:java": { "foreground": "#00ff00" "fontStyle": "bold" }
}

The rule above defines that all declarations of readonly variables in Java shoud be colored greed and bold

See the Semantic Highlighting Wiki Page for more information.

View more solutions