How can I change the color of <> tags on Visual Studio Code?

Question

I recently changed my color theme in VisualStudio Code, I like everything from the theme except for the light purple color of the <> tags, they clash with the pink. How can I change them so they're a different color, preferable just a darker purple. Btw the theme im using is called Tokyo Night Storm.

Here's an image showing how the angle brackets are currently colored:

I tried going into my settings.json couldn't find exactly what to write.

Answer 1

Use the Developer: Inspect Editor Tokens and Scopes action to open the Scope Inspector . Then click on the token you want to inspect. Then find out its textmate scopes. In this case, the opening angle bracket is:

punctuation.definition.tag.begin.html
meta.tag.structure.html.start.html
text.html.derivative

Pick an appropriate textmate scope, and then use it in a token colour customization like so:

"editor.tokenColorCustomizations": {
    "[Tokyo Night Storm]": {
        "textMateRules": [{
            "scope":"punctuation.definition.tag.begin.html",
            "settings": {
                "foreground": "#FF0000",
                "fontStyle": "bold"
            }
        },{
            "scope":"punctuation.definition.tag.end.html",
            "settings": {
                "foreground": "#FF0000",
                "fontStyle": "bold"
            }
        }],
    }
},

See also the docs for creating your own colour theme .