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?
-
It would be great to have an extension for this.carloswm85– carloswm852021-10-31 01:12:35 +00:00Commented Oct 31, 2021 at 1:12
-
2More information on styling tabs, can be found here: code.visualstudio.com/api/references/…carloswm85– carloswm852021-10-31 01:17:31 +00:00Commented Oct 31, 2021 at 1:17
-
2I wrote an extension which colors the active tab based on some file regex, making it super comfortable when working on monorepos or client/server shared repos. Check it out - marketplace.visualstudio.com/…orepor– orepor2022-06-13 19:05:51 +00:00Commented Jun 13, 2022 at 19:05
-
@carloswm85 you can try marketplace.visualstudio.com/items?itemName=mondersky.tabscolormondersky– mondersky2022-10-27 08:38:11 +00:00Commented Oct 27, 2022 at 8:38
-
@mondersky awesome. It looks pretty good. It has some pretty nice features. Thanks for the lead.carloswm85– carloswm852022-10-27 12:39:13 +00:00Commented Oct 27, 2022 at 12:39
|
Show 1 more comment
3 Answers
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
To change the tabs header you can use the following:
"workbench.colorCustomizations": {
"editorGroupHeader.tabsBackground": "#ff0000",
}
You can type tab. and it will suggest similar properties you can change
3 Comments
Taffarel Xavier
Greaty! Tranks for answer.
JonSnow
how do I get to settings.json ?
darren
this works nicely.
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"
},
Comments
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
