CODEWITHSUNDEEP
visual-studio-code
see sharper
see sharper

Reputation: 12035

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

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?

Upvotes: 24

Views: 41613

Answers (4)

Aniket
Aniket

Reputation: 1122

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

    enter image description here

  1. Now open settings.json file in vscode

  2. 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.

Upvotes: 4

Mihai Chelaru
Mihai Chelaru

Reputation: 8187

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:

Modifying the theme source

Modified HTML tag coloring

Upvotes: 29

Lodoss
Lodoss

Reputation: 469

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.

Upvotes: 8

see sharper
see sharper

Reputation: 12035

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

Upvotes: 35

Related Questions