8

Is there a way to configure the background color of the tab's bar in VS Code? I know there is a workBench.colorCustomization setting that allows theme colors to be changed using VS Code settings.json files; is it possible to change it using that setting?

Tab bar

JΛYDΞV
  • 8,532
  • 3
  • 51
  • 77
Aayush Kuntal
  • 95
  • 2
  • 5
  • 2
    See https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs – Mark Jun 13 '21 at 15:57
  • Since I came here from a search for something with similar wording, which I found here: https://code.visualstudio.com/api/references/theme-color#editor-colors What I was really looking for was the vertical indent guide lines in between the line numbers/gutter and the code. For that, use: `"editorIndentGuide.background": "#ffffff10", "editorIndentGuide.activeBackground": "#ffffff30"` (I just used white with alpha here.) – Andrew Apr 10 '22 at 01:02

1 Answers1

13

To style the editor's area described the question above, use the property displayed below.

"editorGroupHeader.tabsBackground": "#00FF00"



It seems some people are confused how to get the property to activly change the color of the area that the property is responsible for, so I added 2 examples of how to correctly use V.S. Code Color-Token theme-properties below. There are two examples, because there are two ways to use it. The first is shown here.


1.  Using the Property in a Theme

Below shows how to use the property that colors the area described by the author of the question. The author asked specificly for the background, but I included all three properties that are responsible for coloring the area. This example demonstrates using a theme to color the V.S. Code Editor.

// Using the property in a VSCode Theme:

// FILE (Linux):
// $HOME/.vscode/extensions/${theme}/themes/${theme}.json


// FILE (Windows 10)
// C:\Users\${uid}\.vscode\extensions\${theme}\themes\${theme}.json
  

{
    "$schema": "vscode://schemas/color-theme",
    "id": "developers-dojo",
    "type": "dark",
    "colors": {
        "editorGroupHeader.tabsBackground": "#021331",
        "editorGroupHeader.tabsBorder": "#00FF4040",
        "editorGroupHeader.border": "#000000D0",
    }
}


2. Using the Property in a settings.json File

The easiest way to use the property editorGroupHeader.tabsBackground to color the V.S. Code Editor is to simply type the property into your setting.json file, or your work-space's ./.vscode/settings.json file. Just remember that this is a property that belongs to a group of color tokens defined in a location separate from where the settings properties are defined, so if you just add it to your settings.json file, your going to find that the property doesn't work that way. You need to use the special configuration JSON-Property, workbench.colorCustomizations to wrap the color-properties you want to use. If you add the snippet below to a settings.json file, you will change the color of the Tab's Group area.


// Use in either your user's "settings.json" file
// Or in your work-space's "./.vscode/settings.json" file

{
  "workbench.colorCustomizations": {
    "editorGroupHeader.tabsBackground": "#0000FF",
    "editorGroupHeader.tabsBorder": "#0F6C8C",
    "editorGroupHeader.border": "#FF5010",
  }
}

JΛYDΞV
  • 8,532
  • 3
  • 51
  • 77
  • @Aayush Kuntai Awsome, glad to help. One little favor though, You gotta mark my answer as being correct so other people who search for this question, see that it has an answer that was correct. – JΛYDΞV Jun 14 '21 at 14:38
  • Hi, When editing the settings.js file, I get a "unknown configuration setting" on the "editorGroupHeader.tabsBackground": "#021331" line... and it's greyed out, any idea why? – Alonzzo2 Jan 30 '22 at 10:41
  • 1
    @Alonzo so its not settings.js, its `settings.json`. Try creating a new project. In that project create a single directory named `.vscode` then inside the directory create a file named `settings.json`. The full pathname for the file will be `./.vscode/settings.json`. Then try adding this to your settings file `{ "workbench.colorCustomizations": { "editorGroupHeader.tabsBackground": "#00FF00" } }` – JΛYDΞV Feb 02 '22 at 22:00
  • 1
    Make sure you copy and paste the snippet exactly as shown above. I'll rewrite it below. And make sure your `settings.json` file doesn't have anything else in it. If you do it right, your tabs background will be green. If its not green, one thing you can check is this setting `workbench.editor.wrapTabs`, you want to make sure it is off. – JΛYDΞV Feb 02 '22 at 22:03
  • 1
    @Alonzzo2 I edited the question to try and better assist you, and anyone else who has a difficult time getting the properties to configure the editor's colors successfully. – JΛYDΞV Feb 03 '22 at 03:48
  • The easiest way to find out what all the available properties are is to open the command palette and select the "Developer: Generate Color Theme From Current Settings" option. – Shiraz Dec 21 '22 at 09:29