Customizing syntax highlighting in Visual Studio Code

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

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.

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"
        }
    }
  ]
}