Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mikemaccana opened this issue May 14, 2019 · 23 comments · Fixed by #3027
Closed

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

mikemaccana opened this issue May 14, 2019 · 23 comments · Fixed by #3027
Labels
Area-User Interface Issues pertaining to the user interface of the Console or Terminal Issue-Task It's a feature request, but it doesn't really need a major design. Product-Terminal The new Windows Terminal. Resolution-Fix-Committed Fix is checked in, but it might be 3-4 weeks until a release. Tracking-External This bug isn't resolved, but it's following an external workitem.
Milestone

Comments

@mikemaccana
Copy link
Contributor

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

image

@miniksa miniksa added the Area-User Interface Issues pertaining to the user interface of the Console or Terminal label May 14, 2019
@miniksa
Copy link
Member

miniksa commented 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?

@mdtauk
Copy link

mdtauk commented 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

@zadjii-msft
Copy link
Member

@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

@mdtauk
Copy link

mdtauk commented 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

@stmoy
Copy link

stmoy commented 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.

@ghost ghost added the Needs-Tag-Fix Doesn't match tag requirements label May 17, 2019
@miniksa miniksa added Issue-Task It's a feature request, but it doesn't really need a major design. Product-Terminal The new Windows Terminal. and removed Mass-Chaos labels May 17, 2019
@ghost ghost removed the Needs-Tag-Fix Doesn't match tag requirements label May 17, 2019
@zadjii-msft zadjii-msft added this to the Terminal v1.0 milestone Jun 19, 2019
@eyalroth
Copy link

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

@stmoy
Copy link

stmoy commented 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

@DJackman123
Copy link
Contributor

I think the dark version could still use more contrast.

@eyalroth
Copy link

eyalroth commented 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

@stmoy
Copy link

stmoy commented 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

@eyalroth
Copy link

eyalroth commented 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

@oceanMIH
Copy link

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?

@stmoy
Copy link

stmoy commented 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.

@ghost ghost added the In-PR This issue has a related PR label Oct 2, 2019
DHowett-MSFT pushed a commit that referenced this issue Oct 15, 2019
* We had to move to the final API:
   * Items -> TabItems
   * Items.VectorChanged -> TabItemsChanged
   * TabClose -> TabCloseRequested
   * TabViewItem.Icon -> TabViewItem.IconSource
* TabRowControl has been converted to a ContentPresenter, which
  simplifies its logic a little bit.
* TerminalPage now differentiates MUX and WUX a little better
* Because of the change from Icon to IconSource in TabViewItem,
  Utils::GetColoredIcon needed to be augmented to support MUX IconSources.
  It was still necessary to use for WUX, so it's been templatized.
* I moved us from WUX SplitButton to MUX SplitButton and brought the
  style in line with the one typically provided by TabView.
* Some of our local controls have had their backgrounds removed so
  they're more amenable to being placed on other surfaces.
* I'm suppressing the TabView's padding.
* I removed a number of apparently dead methods from App.
* I've simplified the dragbar's sizing logic and eventing.
* The winmd harvester needed to be taught to not try to copy winmds for
  framework packages.
* We now only initialize the terminal once we know the size

Closes #1896.
Closes #444.
Closes #857.
Closes #771.
Closes #760.
@ghost ghost added the Needs-Tag-Fix Doesn't match tag requirements label Oct 15, 2019
@ghost ghost added Resolution-Fix-Committed Fix is checked in, but it might be 3-4 weeks until a release. and removed In-PR This issue has a related PR labels Oct 15, 2019
@ghost
Copy link

ghost commented Oct 23, 2019

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

Handy links:

@cf-avdd
Copy link

cf-avdd commented Jan 28, 2020

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

@cinnamon-msft cinnamon-msft added the Tracking-External This bug isn't resolved, but it's following an external workitem. label Jan 28, 2020
@ghost ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Jan 28, 2020
@cinnamon-msft
Copy link
Contributor

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

@Dannymx
Copy link

Dannymx commented 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

@zadjii-msft
Copy link
Member

@Dannymx you'd probably be interested in #3327

@AndreyTomilinXmpi
Copy link

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.

@mwittmann
Copy link

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

@AndreyTomilinXmpi
Copy link

@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

@fusenuk
Copy link

fusenuk commented 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.

@jimyag
Copy link

jimyag commented Aug 14, 2024

#15675
Setting the active tab color worked for me
image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-User Interface Issues pertaining to the user interface of the Console or Terminal Issue-Task It's a feature request, but it doesn't really need a major design. Product-Terminal The new Windows Terminal. Resolution-Fix-Committed Fix is checked in, but it might be 3-4 weeks until a release. Tracking-External This bug isn't resolved, but it's following an external workitem.
Projects
None yet
Development

Successfully merging a pull request may close this issue.