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

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:

For mac users, you can follow the below steps

1. Open finder

2. Press cmd+shift+h to open users folder

3. Go to users/your user name

4. Press cmd+shift+. To open hidden files

5. Go to .vscode/extensions/sdras.night-owl /themes/Night owl-color-theme.json(In my case its night owl theme.)

6. Drag and Open the file in vscode

7. Open the html file you want to customise

8. Select the div element and press cmd+shift+p

9. Select developer: inspector editor token and scopes

10. Select the textmatescope eg: entity.name.tag.js

    

11. Now open settings.json file in vscode

12. Add below code

    "editor.tokenColorCustomizations": {
    
        "[Night Owl (No Italics)]": {
    
            "textMateRules": [
            {
    
                "scope": "entity.name.tag.js",
    
                "settings": {
                    "foreground": "#7fdbca"
                }
            },
            {
                "scope": "entity.other.attribute-name",
                "settings": {
                    "foreground": "#82AAFF",
                    "fontStyle": "bold"
                }
            }
            ]
        }
    }
    

change the foreground to whatever you want to use. and your done.

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

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.