CODEWITHSUNDEEP
visual-studio-code
penguin
penguin

Reputation: 341

VS Code Customize Tab Colors

How do I change VS Code tab colors? Is there an attribute in settings.json (i.e. a corollary to "tab.activeBorder": "#18aa83") for background color?

VS Code tabs

Upvotes: 34

Views: 21621

Answers (3)

mondersky
mondersky

Reputation: 471

You can only target the active tab with the theme color API though, the only workaround I found to this is to patch vs code and inject arbitrary javascript code that will manipulate the tabs html, tabsColor does this

enter image description here

Upvotes: 0

Samselvaprabu
Samselvaprabu

Reputation: 18227

In settings.json , add below details. It will be helpful as some text colors are dim. This setting works well.

Also if you want to set colors based on themes this will be helpful.

"workbench.colorCustomizations": {
    "[Visual Studio Dark]": {
        "tab.activeBorderTop": "#6a6ce4",
        "tab.activeBackground": "#182952",
        "tab.activeBorder": "#6a6ce4"
    },
    "[Default Dark+]": {
        "tab.activeBorderTop": "#6a6ce4",
        "tab.activeBackground": "#180753",
        "tab.activeBorder": "#6a6ce4"
    },
    "editor.lineHighlightBackground": "#1073cf2d",
    "editor.lineHighlightBorder": "#9fced11f"
},

Upvotes: 8

soulshined
soulshined

Reputation: 10622

VS Code documents color customizations for tabs in the theme color api.

To edit the tab colors you can use the following identifiers:

{
    "workbench.colorCustomizations": {
        "tab.activeBackground": "#ff0000",
        "tab.inactiveBackground": "#ff0000"
    }
}

You add that to your settings.json file

tab picture

To change the tabs header you can use the following:

"workbench.colorCustomizations": {
    "editorGroupHeader.tabsBackground": "#ff0000",
}

header group picture

You can type tab. and it will suggest similar properties you can change

Upvotes: 67

Related Questions