-
Notifications
You must be signed in to change notification settings - Fork 660
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
NumberBox: Background of the SpinButton Popup cannot be distinguished from a default page background in Dark theme #2843
Comments
@chigy can you weigh in on the appropriate color for this? @SavoySchuler FYI |
The shadow does not show up well with the pure black of the Dark Theme - so if this were to use Acrylic and borders, it would improve the experience. |
@kikisaints , I agree with the suggestion but I want to make sure acrylic does not cause problem with this small surface. Kiki, is the size of this popup big enough not to cause the problem we had with Tooltip that made us decide not to use acrylic there? |
@chigy @kikisaints As a helper, here's how the acrylic brush looks with colored background given this design:
|
@chigy Do you have an update on this? I checked the CommandBarFlyout control and that is also using an in-app background for its primary command surface: (And while that CommandBarFlyout has for buttons in the pic above for illustration purposes, it could also have less, such as 2-3 so it would also represent a small surface like the NumberBox spin buttons popup here.) |
@Felix-Dev , I was waiting for @kikisaints for her response but she is on vacation at the moment. |
@chigy Thanks for the update. I will wait for @kikisaints then to give her view on this. |
I believe less than 32x32 on both axes was the issue. If this new suggestion is bigger than 32 on either axis, it should be fine. It's also not that we can't do it, it's more that something that small is spending a lot of cycles/performance to render something that's virtually undetectable. So if we feel this acrylic surface (which is in-line with the guidance by being a popup) is actually noticeable as an acrylic surface than I'm all for it. |
@kikisaints The popup spin buttons are currently of size 40x32 (WidthxHeight):
I will hopefully be able today to create another screenshot showing how the design will look with the guidance given by @chigy. |
@kikisaints @chigy For demo purposes only I modified the NumberBox to show three SpinButton popups next to each other. The The <AcrylicBrush x:Key="SystemControlTransientBackgroundBrush" BackgroundSource="HostBackdrop" TintColor="{StaticResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{StaticResource SystemChromeMediumLowColor}" /> whereas <AcrylicBrush x:Key="SystemControlAcrylicElementBrush" BackgroundSource="Backdrop" TintColor="{StaticResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{StaticResource SystemChromeMediumColor}" /> As you can see, one major difference between these two brushes is that Below I've compared both brushes and how they would look like for the NumberBox spin buttons popup:
As you can hopefully see there is a slight visual difference here depending on which brush I am using. I've also made a comparison without between these two brushes without any fancy modifications to the NumberBox or specially colored backgrounds to show the color contrast with the default page backgrounds:
Which brush should I use here? |
@Felix-Dev the border in the Dark Theme, could do with being lighter, to help the buttons pop from the dark background |
@mdtauk The border I am currently using here is the same one used for the MenuFlyout and CommandBarFlyout -
As the @chigy @kikisaints FYI |
@mdtauk , @Felix-Dev , |
That makes sense, however it is still harder to see the Popup Buttons in the Dark Theme, as it uses a dark border and not a lighter one. |
@chigy I believe @mdtauk's suggestion here is to look at the borderbrush used in dark theme (SystemControlTransientBorderBrush) for transient controls and modify it slighty for better visibility. For example, see the color of the Modifying this brush would not break consistency within WinUI as I believe all transient UIs use that theme resource as their borderbrush. |
@mdtauk , @Felix-Dev , |
@chigy It seems you have missunderstood me. I was not planning to update the border just for the NumberBox control here. |
@mdtauk Can we move updating the borderbrush for transient UIs in dark mode into its separate issue? It's not a NumberBox spin buttons popup specific issue (though if you plan to open a tracking issue for this you can reference the NumberBox as an example). |
Feel free to use the images when setting up a new issue. |
@Felix-Dev , I understood you perfectly. |
@chigy Ok, then it seems i have missunderstood you :) Anyway, rest assured, I wasn't thinking about doing that here since that would be an update much broader in scope than just the NumberBox. This will be tracked in its own issue which with @mdtauk's consent I would open later today or tomorrow. Back to the NumberBox specific issue here: Do you have an opinion on whether I should use the |
@Felix-Dev , I don't know the specific brushes used but please match the color exactly with the MenuFlyout. |
@chigy Alright, will do. |
Describe the bug
The background of the NumberBox SpinButton Popup cannot be distinguished from a default page background in Dark theme.
Steps to reproduce the bug
Expected behavior
Since the Popup is a transient UI like the ComboBox's dropdown menu or the MenuBarItem flyout menu, it should have the same background like these, as per the acrylic guidance:
NuGet package version:
Current WinUI master builds.
Additional Context
If I were to work on a PR for this I would likely want to tie this into #2844 as I would create a dedicated theme resource here for the Popup background.
The text was updated successfully, but these errors were encountered: