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

Update the default themes for 1.16 #13743

Merged
merged 33 commits into from
Aug 31, 2022
Merged

Conversation

zadjii-msft
Copy link
Member

@zadjii-msft zadjii-msft commented Aug 15, 2022

More or less, as in #13554

  • Dark theme by default (was system)
    • Justification:

      I think the interesting thing that we have today is that the color
      scheme is dark by default, but our window theme is set to system.
      System theme in Windows 11 is defaulted to light unless changed by
      the user. Now, we have a conflict between the theme and color scheme
      in Terminal.

      I think our options become, make the color scheme match "default"
      and set it to a light color scheme if the system theme is light, or
      manually match the theme to the color scheme by setting it to dark.

      Given that Terminal has historically had a black background with
      its Campbell color scheme, for a consistent UI experience, I'm
      voting to change the window theme to be dark by default as well.

  • tab.background: terminalBackground
  • Change the tab row colors back to "what they were pre-Controlsv2" more
    or less
    • The ramp is based off of "Light tab row background from Edge's
      unfocused titlebar color, inactive tab row color BG from the
      controlsv1 colors"
  • tabRow.unfocusedBackground set Transparent

Closes #13554

@zadjii-msft
Copy link
Member Author

Dark

1-16-default-dark

Light

1-16-default-light

@ghost ghost added Area-Theming Anything related to the theming of elements of the window Issue-Task It's a feature request, but it doesn't really need a major design. Product-Terminal The new Windows Terminal. labels Aug 15, 2022
},
"tabRow":
{
"unfocusedBackground": "#FFFFFFFF"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is very white

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aye, it is. There's not a lot of room to go lighter from #e8e8e8. I suppose we could wholesale copy Edge for light mode. That would be

  • #cdcdcd for focused
  • #e8e8e8 for unfocused

instead. With light mode we don't really have a "black tab on dark background" contrast issue we need to worry about. @cinnamon-msft thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are there light colors that are defined for the tab row control? I'd assume we'd want to align with XAML recommendations?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

... yes? The default WinUI colors are pretty terrible contrast-wise: #f9f9f9 on #f3f3f3
image

Which is part of the reason we had to change the colors in the first place 😐

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if Edge has good enough contrast, I vote we do that.

@@ -26,7 +26,7 @@
// Miscellaneous
"confirmCloseAllTabs": true,
"startOnUserLogin": false,
"theme": "system",
"theme": "dark",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may cause some people to snap

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it was definitely a 🌶️ take, for sure. @cinnamon-msft suggested it originally.

Copy link
Contributor

@WSLUser WSLUser Aug 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's much better to simply leave system as default. If a user wants dark (or light) no matter what, they'll set it explicitly. It's the same thing with Edge. It's system by default as well. Since we're following Edge's example for the theme, this should probably also match.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the interesting thing that we have today is that the color scheme is dark by default, but our window theme is set to system. System theme in Windows 11 is defaulted to light unless changed by the user. Now, we have a conflict between the theme and color scheme in Terminal.

I think our options become, make the color scheme match "default" and set it to a light color scheme if the system theme is light, or manually match the theme to the color scheme by setting it to dark.

Given that Terminal has historically had a black background with its Campbell color scheme, for a consistent UI experience, I'm voting to change the window theme to be dark by default as well.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree. People who don't like it can switch it back -- they are likely accustomed to applications acting strange in light theme ;P

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lmao wassup reddit 😜

"tab":
{
"background": "terminalBackground",
"unfocusedBackground": "#00000000"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just alpha 0 so it blends in with the rest of the tab bar?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeppers. Basically cause our tabs RN are already "transparent when unfocused". This gives them "terminalBG" when focused, but retains "transparent when unfocused", so that the black of campbell doesn't show up semi-transparent on unfocused tabs even in light mode.

@DHowett
Copy link
Member

DHowett commented Aug 15, 2022

Closes #1375

@zadjii-msft
Copy link
Member Author

Closes #1375

you're goddamn right it does

@zadjii-msft zadjii-msft linked an issue Aug 16, 2022 that may be closed by this pull request
4 tasks
Comment on lines 286 to 287
"window":
{
Copy link
Member

@lhecker lhecker Aug 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you reformat this file in VS Code with default formatting settings before we merge this? By default braces are attached to the line with the colon.

DHowett added a commit that referenced this pull request Aug 23, 2022
Copy link
Member

@carlos-zamora carlos-zamora left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment-ing instead of approving because I want the JSON file formatted nicely and some resolution on the Edge colors thread.

},
"tabRow":
{
"unfocusedBackground": "#FFFFFFFF"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if Edge has good enough contrast, I vote we do that.

zadjii-msft and others added 4 commits August 31, 2022 11:40
Co-authored-by: Leonard Hecker <lhecker@microsoft.com>
[11:48 AM] Leonard Hecker
of course not - it's "alpha A inversed"

[11:49 AM] Leonard Hecker
why is that so hard to understand /s lmao
Base automatically changed from dev/migrie/b/13684-inactiveTabBg to main August 31, 2022 17:48
@zadjii-msft zadjii-msft merged commit 0b1b7e6 into main Aug 31, 2022
@zadjii-msft zadjii-msft deleted the dev/migrie/b/13554-new-default-theme branch August 31, 2022 18:32
@ghost
Copy link

ghost commented Sep 13, 2022

🎉Windows Terminal Preview v1.16.252 has been released which incorporates this pull request.:tada:

Handy links:

@ghost ghost mentioned this pull request Sep 13, 2022
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-Theming Anything related to the theming of elements of the window Issue-Task It's a feature request, but it doesn't really need a major design. Product-Terminal The new Windows Terminal.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[1.16] Default theme updates
6 participants