Stronger distinction between selected and unselected tabs

[mpobaschnig]

Hey,

currently, the difference between selected and unselected tabs is only a small increase of brightness of the foreground color, see images. In there, the first tab is always currently opened, the second and third were previously selected via ctrl + click and the last two are unselected.

Tokyo Night:

Tokyo Night Storm:

Tokyo Night Light:

This is pretty hard to distinguish with different qualities of monitors (and sometimes even with better ones), especially with many open tabs in different rows. Could we maybe have some stronger distinction here, e.g. by introducing some background highlighting for selected tabs?
One can already change this individually with some combination of "tab.activeBackground", "tab.selectedBackground", and "tab.selectedForeground", but maybe we can find some better defaults if I'm not the only one having this issue, that is. Tokyo Night Light already has "tab.selectedBackground", but the difference is too minor.

Here are some examples for improvement. All these settings below use the editor background as selected tab background to be consistent with the theme.

"workbench.colorCustomizations": {
    "[Tokyo Night]": {
        "tab.selectedBackground": "#1a1b26",
    },
}

Tokyo Night Storm:

"workbench.colorCustomizations": {
    "[Tokyo Night Storm]": {
        "tab.selectedBackground": "#24283b",
    }
}

Tokyo Night Light:

"workbench.colorCustomizations": {
    "[Tokyo Night Light]": {
        "tab.selectedBackground": "#e6e7ed",
    }
}

[enkia]

Hey mpobaschnig thanks for the valid advice. I've tried your improvements in the past (sort of), but it really only works if people don't use breadcrumbs, which I do. Which means I have to change the breadcrumbs background to give it your intended look which makes them more... nondisruptive (generous word) than they already are.

Another option is

"workbench.colorCustomizations": {
    "[Tokyo Night Storm]": {
        "tab.activeForeground": "#C0CAF5",
    }
}

However, I hate to make too many drastic changes since it's somewhat popular and fairly old at this point and people can just modify the areas that are too low contrast for their personal use / brightness levels.

Anyway, this is the only theme I use so I'll sit with this and work awhile with the above change to see where I fall on the matter. This gives other people a chance to chime in as well. I do get your point, though.

[mpobaschnig]

I see your point. I also tried some other stuff, where this would change the border color of selected tabs. Sadly, the themeability of vscode is somewhat limited without using some extension API, as changing the bottom tab color in unselected tabs is not possible as far as I can see:

"workbench.colorCustomizations": {
    "[Tokyo Night]": {
        "tab.selectedBorderTop": "#ff9e64",
        "tab.activeBorderTop": "#00000000",
    },
},

This looks more consistent, but I guess this change is also way too drastic and consequently not the way to go:

"workbench.colorCustomizations": {
    "[Tokyo Night]": {
        "tab.selectedBackground": "#00000000",
        "tab.selectedBorderTop": "#ff9e64",
        "tab.activeBorderTop": "#3d59a1",
        "tab.activeBorder": "#00000000",
        "tab.activeBackground": "#1a1b26",
        "breadcrumb.background": "#1a1b26",
    },
},

I'm somewhat out of ideas of minor changes in this regard, but I guess we can keep this issue open for people to chime in. If you think there's nothing actionable here anymore, feel free to close it.