The default 'active' tab contrast is very low

[mikemaccana]

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

[miniksa]

@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?

[mdtauk]

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

[zadjii-msft]

@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.

(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

[mdtauk]

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.

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

[stmoy]

@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.

[eyalroth]

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

Notepad++

Chrome

IntelliJ

[stmoy]

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

Dark

[DJackman123]

I think the dark version could still use more contrast.

[eyalroth]

@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):

[stmoy]

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

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.

[eyalroth]

@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:

[oceanMIH]

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

Dark

So, how soon this is available?

[stmoy]

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.

[ghost]

🎉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
• Store Download

[cf-avdd]

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

[cinnamon-msft]

We've opened an issue on the Microsoft UI XAML repo for accessibility purposes: microsoft/microsoft-ui-xaml#1901

[Dannymx]

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?

[zadjii-msft]

@Dannymx you'd probably be interested in #3327

[AndreyTomilinXmpi]

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

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

[mwittmann]

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.

[AndreyTomilinXmpi]

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

[fusenuk]

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.

[jimyag]

#15675
Setting the active tab color worked for me

"theme": "jimyag",
    "themes": [
        {
            "name": "jimyag",
            "window": {
                "applicationTheme": "dark"
            },
            "tab": {
                "background": "#A2734C",
                "unfocusedBackground": "#000"
            }
        }
    ],