vscode extensions - 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?

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