Make VSCode 'active tab' more visible


reading time 1 min

When I use VSCode I find it difficult to tell which tab is the active tab. I often find myself clicking on the wrong one. I realize that the active tab’s bottom line is missing, but my eyes never seem to see that.

I finally found a solution!

This is the “before” picture. The active tab is the one in the middle. I can barely tell.

Before

There is a setting called tab.activeBackground that sets the active tab’s color:

1
2
3
4
5
6
7
settings.json 
{
    "workbench.tree.indent": 40,
    "workbench.colorCustomizations": {
        "tab.activeBackground": "#2d3a66",
    }
}

This is the “after” version. It’s much more obvious.

After

Speaking of visual issues… do yourself a favor and set "workbench.tree.indent": 40 so that the indenting on your file tree is easier to view.




Tom Limoncelli

Tom Limoncelli

Recent Posts


  1. Controlling VSCode from the Terminal
  2. Celebrating Juneteenth!
  3. Preparing for the Weather
  4. Crawl/Walk/Run: Automate the Check
  5. Democrats Should Run in Every Office in every Red State

Archive


Categories


Tags


I agree that this website may store my data to personalize my journey in accordance with their Terms & conditions

Powered by Hugo | Theme - YesThatTheme © 2017 - 2026 Tom Limoncelli