How do I customise the color of HTML tags in Visual Studio Code?

Question

I\'m using the Abyss theme which I like, but certain colors are too dark. I have customized some token colors using (for instance):

\"editor.tokenColorCustomizat         


        

Answer 1

You can go into the theme's .json file and modify it to suit your needs, as mentioned in this post. Mine was located in C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-abyss\themes

EDIT: As pointed out in the comments by @www-0av-Com, the path to the file is now C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\theme-abyss\themes, where <username> is your Windows user.

You can use Ctrl + Shift + P to open the Command Palette and then open up the Developer: Inspect Editor Tokens and Scopes to look at the TextMate scope of the element you're interested in modifying. In the case of the HTML tag in the abyss theme it's entity.name.tag. You can see what the Scope Inspector looks like in the second image below.

Then go into the abyss-color-theme.json file and search for that string and modify the color of the tags as you see fit. I changed mine to an ugly orange color as below:

Answer 2

The accepted answer is good, but thought I'd add this as it obviates the need to edit the theme JSON itself. I edited my settings as follows:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "keywords": "#7ea4df",
        "types": "#1fa8d8",
        "comments": "#727272",
        "strings": "#29a792",
        "textMateRules": [
            {
                "scope": "entity.name.tag",
                "settings": {
                    "foreground": "#7ea4df"
                }
            }
        ]
    }
},

Answer 3

I know it's might be too late, but for anyone who doesn't want to make this manually, there is the Rainbow Tags extension.

I'm using it for a couple of weeks and it's very satisfying.