How to change a color of a syntax in Visual Studio Code?

Question

For example, if I am writing latex in VS Code, I've selected a theme, but want to fine tweak it.

If I want to change the coloring of a citation item, for example, the letters abc98 in \cite{abc98}, what should I do?

In Atom, you can open up the devtools, and select the item, and see the css scope. Can't do that in VS Code; it shows something like mk21, which doesn't make sense.

This page contain very little information. If the syntax I want to change is not within the mentioned "comments", "variables" etc. I don't know how to find the correct token (is that the word?)

Can one tune the colors in User Settings at all? Or do I have to write my own theme to do this?

Answer 1

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

To determine the scope of some text, run the command Developer: Inspect Editor Tokens and Scopes, then click the text.