Active tab color confuses me regularly
gwenwindflower opened this issue · 5 comments
helllooo! it's me again.
curious for your thoughts on something that throws me off pretty regularly even though i'm aware of it -- which is that the active tab looks (to me) like it's deactivated, and the non-active tabs, because they have the same color as the background of the editor, creating a sense of continued space, look active. Screenshots attached.
My proposal would be to flip these styles, so all the inactive tabs are dimmer and the active tab is the same color as the editor background.
happy to take a stab at it if that's a change you support.
Apologies for the late response; I had to give this one some thought.
We tried to differentiate active vs inactive by using dimmed text with no special background and bright text with a highlighted background respectively. The foreground difference is lost when diagnostic/git colours override the foreground, e.g. the gold filename text in your screenshot. I agree that the active tab, with these conditions, is hard to decipher.
Per your proposal, I imagine the entire tab bar background would be the highlight colour (or similar) while the active tab would be base, giving the illusion that the active tab is part of the current buffer. I say "entire tab bar" because if the user has exactly two tabs open, one with the base background and the other being highlighted, the highlighted tab would appear active in my opinion.
I don't feel that the different coloured tab bar would match the rest of our theme. That being said, I'm happy to accept a PR to add something to the readme or perhaps to the wiki that explains how to modify the active tab. This could be your exact proposal and/or simply making the active highlight a higher contrast.
Edit: Another option we explored was adding a rose or other accent underline to the active tab. Overall I prefer less colour and vibrancy but will always be willing to change something in the name of accessibility :)
no worries, and that makes sense! i may play around with this a bit given your feedback, which i completely vibe with, and see if i can come up with something that works for all of the above considerations. i'll post something here if so for further thoughts, even if it ends up just being a alternate suggestion people can make on their own.
the highlighted tab would appear active in my opinion
Every single default VSCode theme has the active tab in the same color as the buffer. Top 3 themes in the marketplace do the same. Even Chrome, Edge, Safari design their tabs this way.
Perhaps one of the solutions could be to add "inverted tabs" variant to each theme in a similar manner you have "no italics" variant?
Thanks for your work!
Every single default VSCode theme has the active tab in the same color as the buffer. Top 3 themes in the marketplace do the same.
Although I don't agree with this being a good reason to change something, I understand there is value in predictability/consistency—especially when switching between multiple themes.
Here is how this could potentially look:
Tab bar background lightened. Active tab background matches buffer background.
I noticed that when themes have the same active tab background as the buffer, the sidebar and tab bar background usually match as well. This changes a bit more, but could fit into a more generically-named "high contrast" variant:
The sidebar is differentiated from the editor buffer, with the activity bar lightened to continue being differentiated from the sidebar. The tab bar background matches the now lighter sidebar.
Curious on thoughts for either approach. Also curious how people feel having a more cluttered theme selection due to having more options; perhaps a high contrast variant would alleviate this as I believe it is shown in a different group.
hey @mvllow i missed this coming through, just cleaning out my notifications, i really like option 2!