Change Visual Studio Code's tab bar color

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