The default 'active' tab contrast is very low #1057

Closed
opened 2026-01-30 22:15:28 +00:00 by claunia · 23 comments
Owner

Originally created by @mikemaccana on GitHub (May 14, 2019).

For those of us who are a little older, it's difficult to distinguish between the active and inactive tabs:

image

Originally created by @mikemaccana on GitHub (May 14, 2019). For those of us who are a little older, it's difficult to distinguish between the active and inactive tabs: ![image](https://user-images.githubusercontent.com/172594/57709479-089f2c80-7663-11e9-8a59-9af26498981d.png)
Author
Owner

@miniksa commented on GitHub (May 14, 2019):

@cinnamon-msft, you had a pile of designs and colors already. Do you want to put those in here so theoretically someone could work on implementing them with the XAML resources against the MUX tab control?

@miniksa commented on GitHub (May 14, 2019): @cinnamon-msft, you had a pile of designs and colors already. Do you want to put those in here so theoretically someone could work on implementing them with the XAML resources against the MUX tab control?
Author
Owner

@mdtauk commented on GitHub (May 15, 2019):

This becomes a non-issue if the Active tab reflects the same colour and styling as the console area itself.
image
image

@mdtauk commented on GitHub (May 15, 2019): This becomes a non-issue if the Active tab reflects the same colour and styling as the console area itself. ![image](https://user-images.githubusercontent.com/7389110/57743150-dec62400-76bb-11e9-927b-c467ecae1830.png) ![image](https://user-images.githubusercontent.com/7389110/57743224-146b0d00-76bc-11e9-9c7a-9364a02eaf28.png)
Author
Owner

@zadjii-msft commented on GitHub (May 15, 2019):

@mdtauk I believe the intention is to provide that tab-styling where the tab matches the control's background as an optional (on by default?) setting.

Plus, what happens when there is more than one pane per tab? There's no way to ensure that the control is actually connected to the tab itself, so colorizing the tab with the focused control's background might look weird.

image
(see #532, #702)


As far as the contrast of the tab view by default, I definitely agree that there isn't enough contrast for the light mode tabs by default. This is something we should probably upstream with the Windows UI folks building the tab control. Summoning @stmoy

@zadjii-msft commented on GitHub (May 15, 2019): @mdtauk I believe the intention is to provide that tab-styling where the tab matches the control's background as an optional (on by default?) setting. Plus, what happens when there is more than one pane per tab? There's no way to ensure that the control is actually connected to the tab itself, so colorizing the tab with the focused control's background might look weird. ![image](https://user-images.githubusercontent.com/18356694/57777782-45f9cd80-76e8-11e9-8e16-a700f06236d3.png) (see #532, #702) <hr> As far as the contrast of the tab view by default, I definitely agree that there isn't enough contrast for the light mode tabs by default. This is something we should probably upstream with the Windows UI folks building the tab control. Summoning @stmoy
Author
Owner

@mdtauk commented on GitHub (May 15, 2019):

I have commented on the design for the Tab Control when it first emerged in Sets A/B testing, and the development of it in the Community Toolkit.

Acrylic Examples x2

image

And I have always wanted to ensure Tabs felt connected, by matching them and using 60% and 90% Acrylic brushes

@mdtauk commented on GitHub (May 15, 2019): I have commented on the design for the Tab Control when it first emerged in Sets A/B testing, and the development of it in the Community Toolkit. ![Acrylic Examples x2](https://user-images.githubusercontent.com/7389110/57779621-53ca4580-771e-11e9-9180-9de5b3194090.png) ![image](https://user-images.githubusercontent.com/7389110/57779766-b28fbf00-771e-11e9-934d-f8fa50b32d08.png) And I have always wanted to ensure Tabs felt connected, by matching them and using 60% and 90% Acrylic brushes
Author
Owner

@stmoy commented on GitHub (May 15, 2019):

@cinnamon-msft, you had a pile of designs and colors already. Do you want to put those in here so theoretically someone could work on implementing them with the XAML resources against the MUX tab control?

This is a known issue with the preview version of the Tab control that is being built in the Windows UI library. The Terminal app could temporarily override some resources to increase contrast, but this will ultimately be fixed in the Tab control implementation in the library.

@stmoy commented on GitHub (May 15, 2019): > @cinnamon-msft, you had a pile of designs and colors already. Do you want to put those in here so theoretically someone could work on implementing them with the XAML resources against the MUX tab control? This is a known issue with the preview version of the Tab control that is being built in the Windows UI library. The Terminal app could temporarily override some resources to increase contrast, but this will ultimately be fixed in the Tab control implementation in the library.
Author
Owner

@eyalroth commented on GitHub (Aug 28, 2019):

That is one of the first things I noticed when first using the terminal. I would like to add a few screenshots of tools which I believe have a pretty good tab visual design:

VS Code
tabs1

Notepad++
tabs2

Chrome
tabs3

IntelliJ
tabs4

@eyalroth commented on GitHub (Aug 28, 2019): That is one of the first things I noticed when first using the terminal. I would like to add a few screenshots of tools which I believe have a pretty good tab visual design: **VS Code** ![tabs1](https://user-images.githubusercontent.com/6641808/63856671-d8c62b80-c9aa-11e9-9a34-e8c1488b7d0e.png) **Notepad++** ![tabs2](https://user-images.githubusercontent.com/6641808/63856683-df54a300-c9aa-11e9-8448-2a0753c12668.png) **Chrome** ![tabs3](https://user-images.githubusercontent.com/6641808/63856702-e5e31a80-c9aa-11e9-80e2-7a226880fac7.png) **IntelliJ** ![tabs4](https://user-images.githubusercontent.com/6641808/63856716-ef6c8280-c9aa-11e9-9fe8-f67db1122dbe.png)
Author
Owner

@stmoy commented on GitHub (Aug 28, 2019):

Good news, everyone!

We have heard your feedback, and the WinUI team has updated the TabView control to have significantly more contrast between the selected and rest tabs.

Here is what it will look like when the TabView ships. Note that the first tab is selected and the second one is hovered.
Light
Light TabView

Dark
Dark TabView

@stmoy commented on GitHub (Aug 28, 2019): ![Good news, everyone!](https://media.giphy.com/media/3o7abA4a0QCXtSxGN2/giphy.gif) We have heard your feedback, and the WinUI team has updated the TabView control to have significantly more contrast between the selected and rest tabs. Here is what it will look like when the TabView ships. Note that the first tab is selected and the second one is hovered. **Light** ![Light TabView](https://user-images.githubusercontent.com/25991996/63895673-a1ed1700-c9a4-11e9-8780-da77f128ef1e.png) **Dark** ![Dark TabView](https://user-images.githubusercontent.com/25991996/63895721-ca751100-c9a4-11e9-9edd-3cf2bfb3e13d.png)
Author
Owner

@DJackman123 commented on GitHub (Aug 28, 2019):

I think the dark version could still use more contrast.

@DJackman123 commented on GitHub (Aug 28, 2019): I think the dark version could still use more contrast.
Author
Owner

@eyalroth commented on GitHub (Aug 28, 2019):

@DJackman123 It actually looks much better when the image is fully enlarged.

I'm wondering though, shouldn't the focused tab be brighter than the rest? I thought the general idea in dark themes is that the brighter a surface is the more elevated it seems. Also, this is how it looks in chrome (when Windows apps are set to dark mode):

darktabs

@eyalroth commented on GitHub (Aug 28, 2019): @DJackman123 It actually looks much better when the image is fully enlarged. I'm wondering though, shouldn't the focused tab be _brighter_ than the rest? I thought the general idea in dark themes is that the brighter a surface is the more elevated it seems. Also, this is how it looks in chrome (when Windows apps are set to dark mode): ![darktabs](https://user-images.githubusercontent.com/6641808/63896495-d4296380-c9fa-11e9-8444-ee915947cb60.png)
Author
Owner

@stmoy commented on GitHub (Aug 28, 2019):

This is what it looks like without the hovered tab in the middle, which is more representative of the "rest state" of the control.

Dark TabView

I'm wondering though, shouldn't the focused tab be brighter than the rest?

I'm glad you asked! The general philosophy for TabView is that the selected tab and the page below it share the same color and therefore look like one contiguous surface. Since the default page color for WinUI is solid black or solid white, that means that the selected tab color must also be solid black or solid white - otherwise there would be a seam between the selected tab and the page. We're internally discussing our color ramp all-up, but for now, we're using the colors provided by the WinUI color ramp.

TabView showing no seam between tab and page

@stmoy commented on GitHub (Aug 28, 2019): This is what it looks like without the hovered tab in the middle, which is more representative of the "rest state" of the control. ![Dark TabView](https://user-images.githubusercontent.com/25991996/63896634-77508d80-c9a7-11e9-8546-d5f395240d5f.png) > I'm wondering though, shouldn't the focused tab be brighter than the rest? I'm glad you asked! The general philosophy for TabView is that the selected tab and the page below it share the same color and therefore look like one contiguous surface. Since the default page color for WinUI is solid black or solid white, that means that the selected tab color must also be solid black or solid white - otherwise there would be a seam between the selected tab and the page. We're internally discussing our color ramp all-up, but for now, we're using the colors provided by the WinUI color ramp. ![TabView showing no seam between tab and page](https://user-images.githubusercontent.com/25991996/63896801-15445800-c9a8-11e9-9740-439a61dfad06.png)
Author
Owner

@eyalroth commented on GitHub (Aug 28, 2019):

@stmoy In my opinion it gives a bit of a "flat" feeling to the UI.

Also the rest of Windows' UI seems to adhere to the "brighter is higher" concept:
windows-dark

@eyalroth commented on GitHub (Aug 28, 2019): @stmoy In my opinion it gives a bit of a "flat" feeling to the UI. Also the rest of Windows' UI seems to adhere to the "brighter is higher" concept: ![windows-dark](https://user-images.githubusercontent.com/6641808/63897554-32a41100-c9fe-11e9-8e52-925c2e9dc065.png)
Author
Owner

@oceanMIH commented on GitHub (Aug 30, 2019):

Good news, everyone!

We have heard your feedback, and the WinUI team has updated the TabView control to have significantly more contrast between the selected and rest tabs.

Here is what it will look like when the TabView ships. Note that the first tab is selected and the second one is hovered.
Light
Light TabView

Dark
Dark TabView

So, how soon this is available?

@oceanMIH commented on GitHub (Aug 30, 2019): > ![Good news, everyone!](https://camo.githubusercontent.com/07f2e7c263b22c1c2c4d96039cb2a13f76aea8ef/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f336f37616241346130514358745378474e322f67697068792e676966) > > We have heard your feedback, and the WinUI team has updated the TabView control to have significantly more contrast between the selected and rest tabs. > > Here is what it will look like when the TabView ships. Note that the first tab is selected and the second one is hovered. > **Light** > ![Light TabView](https://user-images.githubusercontent.com/25991996/63895673-a1ed1700-c9a4-11e9-8780-da77f128ef1e.png) > > **Dark** > ![Dark TabView](https://user-images.githubusercontent.com/25991996/63895721-ca751100-c9a4-11e9-9edd-3cf2bfb3e13d.png) So, how soon this is available?
Author
Owner

@stmoy commented on GitHub (Aug 30, 2019):

So, how soon this is available?

TabView will be available in WinUI 2.2 (which we expect to ship very soon - within the next week or so).

After that, the Terminal will need to consume the release nuget package. @cinnamon-msft might be able to share more details about this part.

@stmoy commented on GitHub (Aug 30, 2019): > So, how soon this is available? TabView will be available in WinUI 2.2 (which we expect to ship very soon - within the next week or so). After that, the Terminal will need to consume the release nuget package. @cinnamon-msft might be able to share more details about this part.
Author
Owner

@ghost commented on GitHub (Oct 23, 2019):

:tada:This issue was addressed in #3027, which has now been successfully released as Windows Terminal Preview v0.6.2951.0.🎉

Handy links:

@ghost commented on GitHub (Oct 23, 2019): :tada:This issue was addressed in #3027, which has now been successfully released as `Windows Terminal Preview v0.6.2951.0`.:tada: Handy links: * [Release Notes](https://github.com/microsoft/terminal/releases/tag/v0.6.2951.0) * [Store Download](https://www.microsoft.com/store/apps/9n0dx20hk701?cid=storebadge&ocid=badge)
Author
Owner

@cf-avdd commented on GitHub (Jan 28, 2020):

I disagree that this is solved, at least in dark mode.

@cf-avdd commented on GitHub (Jan 28, 2020): I disagree that this is solved, at least in dark mode.
Author
Owner

@cinnamon-msft commented on GitHub (Jan 28, 2020):

We've opened an issue on the Microsoft UI XAML repo for accessibility purposes: https://github.com/microsoft/microsoft-ui-xaml/issues/1901

@cinnamon-msft commented on GitHub (Jan 28, 2020): We've opened an issue on the Microsoft UI XAML repo for accessibility purposes: https://github.com/microsoft/microsoft-ui-xaml/issues/1901
Author
Owner

@Dannymx commented on GitHub (May 3, 2020):

In dark mode my tab looks totally different than my terminal background, is there a way to set a profile property like tabColor or something like that?

image

@Dannymx commented on GitHub (May 3, 2020): In dark mode my tab looks totally different than my terminal background, is there a way to set a profile property like tabColor or something like that? ![image](https://user-images.githubusercontent.com/364003/80898531-1f062400-8cca-11ea-82f7-10978f4331e3.png)
Author
Owner

@zadjii-msft commented on GitHub (May 4, 2020):

@Dannymx you'd probably be interested in #3327

@zadjii-msft commented on GitHub (May 4, 2020): @Dannymx you'd probably be interested in #3327
Author
Owner

@AndreyTomilinXmpi commented on GitHub (May 21, 2023):

Not sure how the issue is resolved. Here my terminal in dark mode:

image

The only difference is only bolder text, which is hard to see.

@AndreyTomilinXmpi commented on GitHub (May 21, 2023): Not sure how the issue is resolved. Here my terminal in dark mode: ![image](https://github.com/microsoft/terminal/assets/59411869/a6953fc5-2d00-4945-ac9e-b2b2e47af5d8) The only difference is only bolder text, which is hard to see.
Author
Owner

@mwittmann commented on GitHub (May 21, 2023):

I agree with AndreyTomilinXmpi above. In Dark Mode, tab contrast is still too low. It is a bit better if you turn on "acrylic material" in the Settings under Appearance.
image

@mwittmann commented on GitHub (May 21, 2023): I agree with [AndreyTomilinXmpi](https://github.com/AndreyTomilinXmpi) above. In Dark Mode, tab contrast is still too low. It is a bit better if you turn on "acrylic material" in the Settings under Appearance. ![image](https://github.com/microsoft/terminal/assets/5827956/cfe68aa6-e7bf-49fb-acdc-04598a6dc5f7)
Author
Owner

@AndreyTomilinXmpi commented on GitHub (May 22, 2023):

@mwittmann Thanks for suggestion. The acrylic didn't help much, but changing Color Scheme from "One Half Dark" to "Tango Dark" did the trick:

image

@AndreyTomilinXmpi commented on GitHub (May 22, 2023): @mwittmann Thanks for suggestion. The acrylic didn't help much, but changing Color Scheme from "One Half Dark" to "Tango Dark" did the trick: ![image](https://github.com/microsoft/terminal/assets/59411869/01c2fe0f-986e-4d2a-aee8-2f27a9d348e5)
Author
Owner

@fusenuk commented on GitHub (Jul 25, 2023):

I'm just adding to the above comments, this doesn't feel fixed when using the 'Dark' overall theme and certain Colour Schemes that have fairly dark backgrounds.

I've worked around it by changing the overall theme to 'Light' and leaving my Colour Scheme as a dark colour, but there should be a setting for the difference in contrast.

@fusenuk commented on GitHub (Jul 25, 2023): I'm just adding to the above comments, this doesn't feel fixed when using the 'Dark' overall theme and certain Colour Schemes that have fairly dark backgrounds. I've worked around it by changing the overall theme to 'Light' and leaving my Colour Scheme as a dark colour, but there should be a setting for the difference in contrast.
Author
Owner

@jimyag commented on GitHub (Aug 14, 2024):

https://github.com/microsoft/terminal/discussions/15675
Setting the active tab color worked for me
image

"theme": "jimyag",
    "themes": [
        {
            "name": "jimyag",
            "window": {
                "applicationTheme": "dark"
            },
            "tab": {
                "background": "#A2734C",
                "unfocusedBackground": "#000"
            }
        }
    ],
@jimyag commented on GitHub (Aug 14, 2024): https://github.com/microsoft/terminal/discussions/15675 Setting the active tab color worked for me ![image](https://github.com/user-attachments/assets/809a41cb-d114-4c26-a38a-88ab37c82c5d) ```json "theme": "jimyag", "themes": [ { "name": "jimyag", "window": { "applicationTheme": "dark" }, "tab": { "background": "#A2734C", "unfocusedBackground": "#000" } } ], ```
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#1057