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.tokenColorCustomizations": {
    "[Abyss]": {
        "keywords": "#7ea4df",

but I can't figure out how to change the color of HTML tags in the editor. Can anyone help?

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: