CODEWITHSUNDEEP
visual-studio-code
Bill in Kansas City
Bill in Kansas City

Reputation: 360

VSCode: tab color not responding to customization

I've set up custom colors for the tabs to make them easier to see active vs. inactive, but on some tabs - and I can't find a pattern to it, the customization doesn't stick. The foreground color is red or pink, and it should be light gray.

Settings JSON file is in the picture, and I can't find any other settings that refer to "tabs", so what am I missing?

Thanks!

VSCode tabs: the first tab foreground color isn't correct

Upvotes: 1

Views: 2184

Answers (1)

Timothy G.
Timothy G.

Reputation: 9027

I've broken it down for the items you have in your file using my own as an example with vibrant colors to help distinguish them:

My setting.json:

"workbench.colorCustomizations": {
        "[Default Dark+]": {
            "tab.activeBackground": "#0004ff",
            "tab.activeForeground": "#e100ff",
            "tab.inactiveBackground": "#00ff62",
            "tab.inactiveForeground": "#00b7ff",
            "tab.lastPinnedBorder": "#fafafa",
            "tab.unfocusedActiveForeground": "#fbff00",
            "tab.unfocusedActiveBackground": "#ff0000",
        }
    }

Corresponding components (it's best if you enlarge the image):

components

Notes:

  • Groupings matter - the properties only apply to the currently active/inactive group. A group is each active editor window. In my picture, there are two groups, with the active one on the left (in focus) and the inactive one on the right (out of focus). The tooltips to all of these properties state they apply to groupings. For example, tab.activeBackground's tool tip states the following:

Active tab background color in an active group

  • The tab.lastPinnedBorder property only applies to the last tab that was pinned (as the name would suggest). Personally I feel this is a bizarre option. If I were to pin a new tab, the white line would move to said tab.
  • The property names are slightly misleading. If it doesn't have the word "unfocused" in it, it means the active group (yet these property names do not contain the word "focused").
  • Make sure you have the correct theme selected in your settings that corresponds to the theme you are specifying in your JSON. In my example I have the [Default Dark+] theme selected in my settings (it's actually called Dark+ (default dark) in the drop down in the settings), thus my individual JSON properties are applied. I believe Dark+ is the default when you first install Visual Studio Code (unless it goes off of the systems preferred color theme - I'm not sure if it does).

Upvotes: 7

Related Questions