Added flyout theme setting

[BLM16]

Summary of the Pull Request

Adds the ability to toggle the flyout between dark and light mode. Closes #23831.

PR Checklist

• Closes: Flyout Manual Theme Setting #23831
• Communication: I've discussed this with core contributors already. If work hasn't been agreed, this work might be rejected
• Tests: Added/updated and all pass
• Localization: All end user facing strings can be localized

TODO

• PT currently needs to be restarted in order for the change to take place
• Brief flash of white before dark mode takes effect
• Fix settings icon not changing color initially

Validation Steps Performed

• Added unit test
• Tested the feature locally

[htcfreek]

@BLM16
Thank you for the contribution.

Doesn't it make more sense to bind the fly out on the Settings ui theme setting we already have?

[BLM16]

I thought about that, but there is windows theme and app theme, and I have them set differently. I feel the flout should be separate so people can have it on dark mode while still using a light app theme.

Default for my apps is light mode, yet I use windows' dark mode.

That is why I have separated them: the settings UI should behave like an app, the flout should behave like a native part of windows.

[BLM16]

I could change it and add a fourth (becoming the default) option to match PT theme.

Because it takes no extra effort to make a setting for it, and I see use, I added it.

[htcfreek]

I could change it and add a fourth (becoming the default) option to match PT theme.

Because it takes no extra effort to make a setting for it, and I see use, I added it.

What about reading the setting in Registry and let the user switch between "PT Theme" and "OS Theme"?

[BLM16]

What about reading the setting in Registry and let the user switch between "PT Theme" and "OS Theme"?

That is a good idea. Keep light and dark manual, change the windows default to use windows' OS (not app) theme and add the default option to use PT theme (which would default to the windows app theme anyways)?

[htcfreek]

What about reading the setting in Registry and let the user switch between "PT Theme" and "OS Theme"?

That is a good idea. Keep light and dark manual, change the windows default to use windows' OS (not app) theme and add the default option to use PT theme (which would default to the windows app theme anyways)?

Sounds a bit complex.
Maybe two independent settings are better. I think the most important question is which common usage scenarios will be there.

[givenvessel]

Perfect

[BLM16]

Sounds a bit complex.
Maybe two independent settings are better. I think the most important question is which common usage scenarios will be there.

I don't quite follow what you mean. What I was thinking was for the flyout theme setting. having the following options:

• Light
• Dark
• Windows theme (Default setting to make flyout feel native?)
• PowerToys theme (Default setting to keep PT consistent?)

I would also likely change the App theme dropdown option to say "Windows app theme" instead of "Windows default" because this is more clear which windows theme it is using (since app and os themes both exist).

Thoughts on which flyout theme should be the default?

[htcfreek]

Sounds a bit complex.
Maybe two independent settings are better. I think the most important question is which common usage scenarios will be there.

I don't quite follow what you mean. What I was thinking was for the flyout theme setting. having the following options:

• Light
• Dark
• Windows theme (Default setting to make flyout feel native?)
• PowerToys theme (Default setting to keep PT consistent?)

Let's do it without PT theme. I think if a user want to have it the same he can set both to light or dark.

I would also likely change the App theme dropdown option to say "Windows app theme" instead of "Windows default" because this is more clear which windows theme it is using (since app and os themes both exist).

Sounds good.

Thoughts on which flyout theme should be the default?

Let's have the OS theme as default.

[niels9001]

@BLM16 mind adding a screenshot of the added settings card to the original post so folks can see what's happening there :)?

[jaimecbernardo]

Hi, thanks for the contribution!
Seems to function well enough, but after having opened the flyout already once, changing the setting doesn't seem to take effect until PowerToys is restarted.
Other than that and the question from Niels about "AcrylicBackgroundFillColorDefaultBrush" being needed, it looks good to me!

[BLM16]

Hi, thanks for the contribution! Seems to function well enough, but after having opened the flyout already once, changing the setting doesn't seem to take effect until PowerToys is restarted. Other than that and the question from Niels about "AcrylicBackgroundFillColorDefaultBrush" being needed, it looks good to me!

I commented on the restart still being required and it is part of the TODO for this PR. I need to get that sorted out first.

[BLM16]

@BLM16 mind adding a screenshot of the added settings card to the original post so folks can see what's happening there :)?

Added in the PR description up top.

[niels9001]

@BLM16 mind adding a screenshot of the added settings card to the original post so folks can see what's happening there :)?

Added in the PR description up top.

Having the same card twice couls be confusing. What about having an SettingsExpander instead?

You can move the Flyout SettingsCard into the SettingsExpander.Items and remove the icon (and description I guess)

[BLM16]

What about having an SettingsExpander instead?

Updated. See the edited image up top.

[BLM16]

At this point, the flyout theme change works as expected. There is still a very brief flash of white before the dark theme takes effect when opening the flyout that I cannot seem to figure out.

[niels9001]

At this point, the flyout theme change works as expected. There is still a very brief flash of white before the dark theme takes effect when opening the flyout that I cannot seem to figure out.

Two questions:

• Could you do a before vs. after screenshot to see if there are no visual changes to the Acrylic?
• Are tooltips (hover over a module button to show the shortcut tooltip) rendered in the correct theme?

The FlyoutWindow has the right Acrylic recipe defined (AcrylicBackgroundFillColorBaseBrush). If I understand correctly, this PR introduces another layer of Acrylic in the ShellPage).

Might be that the flashing happens because the acrylic of the window gets loaded first (and is not adjusted to the theme)?

Either way, I think there are two options

1. Remove the Acrylic from the FlyoutWindow and use AcrylicBackgroundFillColorBaseBrush in the ShellPage (I'm not sure if this would work - because the window background might no longer be translucent?)
2. Remove the Acylic from the ShellPage and handle the theme changes on the window itself (preferred)

See: (

PowerToys/src/settings-ui/Settings.UI/FlyoutWindow.xaml

Line 21 in eeca301

<winuiex:AcrylicSystemBackdrop

[BLM16]

2. Remove the Acylic from the ShellPage and handle the theme changes on the window itself (preferred)

What do you mean by this? Change the acrylic to be on the LaunchPage.xaml? Which window are you referring to?

The reason the acrylic is currently applied to the ShellPage is because this combines with the LayerOnAcrylicFillColorDefaultBrush of the LaunchPage and AppsListPage to create a lighter color than the bottom bar. This is similar to the slight difference in color on the toolbar of the win11 action center.

PowerToys/src/settings-ui/Settings.UI/Flyout/LaunchPage.xaml

Lines 29 to 32 in f85fc98

	<Grid
	Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}"
	BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
	BorderThickness="0,0,0,1">

[BLM16]

Hang on, sorry. I see what you are meaning. I will look into that shortly. Not sure how I missed that previously but it looks like I would have saved a bunch of trouble if I saw that.

[BLM16]

@niels9001 The correct acrylic brush should be used now. Thanks for pointing that out! The brief flash is also now fixed when handling the theme change from the base window rather than the shell page. The WinUIEx base theme was temporarily overriding the shell page when it was changing states.

The "ShellPage" is still handling the theme change, however it is the main window controlling this. WinUIEx doesn't give the option to manually set the RequestedTheme as far as I can tell, so it had to be implemented this way. At least the window is controlling the theme.

[BLM16]

Could you do a before vs. after screenshot to see if there are no visual changes to the Acrylic?

 

Are tooltips (hover over a module button to show the shortcut tooltip) rendered in the correct theme?

Yes, all the tooltips are rendered in the correct theme for the modules and other buttons. Their acrylics render as expected.

[niels9001]

Could you do a before vs. after screenshot to see if there are no visual changes to the Acrylic?

 

Are tooltips (hover over a module button to show the shortcut tooltip) rendered in the correct theme?

Yes, all the tooltips are rendered in the correct theme for the modules and other buttons. Their acrylics render as expected.

Hmm.. we're still setting the acrylic brush twice, right? Looks like Background="{ThemeResource AcrylicBackgroundFillColorBaseBrush}" kills the Acrylic effect.

Without AcrylicBackgroundFillColorBaseBrush (expected):

With AcrylicBackgroundFillColorBaseBrush

But, removing it causes this when switching from dark to light theme:

But works with AcrylicBackgroundFillColorBaseBrush (albeit with no transparency in the acrylic)

@BLM16 Would it make sense to just restart PowerToys to update this setting.. that should work, right? Changing themes of UWP/WinUI has always been a pain :(.. Thoughts?

[niels9001]

@BLM16 Btw, we ran into the same issue with adding Mica to the Settings page - when switching themes the backdrop is gone and things don't render correctly. So if we can figure it out here we can solve it for Settings as well 😊!

[BLM16]

Would it make sense to just restart PowerToys to update this setting.. that should work, right? Changing themes of UWP/WinUI has always been a pain :(.. Thoughts?

I will look into this and a few other solutions to see what is best. Good catch on the acrylic.

[BLM16]

I have fixed the acrylic not showing colors from behind. The acrylic should now work for both themes and everything appears to function as expected.

[BLM16]

I just wanted to follow up on this and see if anything else is missing from this PR that is preventing it from getting merged. Any updates would be appreciated 🙂!

[stefansjfw]

@niels9001 Could you take a look? Thanks

I can help with merge conflicts

[BLM16]

Using VS I somehow messed up the rebase a while back and now many of these files diverge or have been "added" from main. I wonder if somehow I switched from a rebase to a merge halfway through? Is there a clean way to fix this outside of completely resetting this to main and adding the commits again?

[stefansjfw]

Using VS I somehow messed up the rebase a while back and now many of these files diverge or have been "added" from main. I wonder if somehow I switched from a rebase to a merge halfway through? Is there a clean way to fix this outside of completely resetting this to main and adding the commits again?

Not sure. Might be easier to start from the clean current main and cherry-pick your commits one by one. Either that or merge current main here and resolve reported conflicts

Copilot reviewed 5 out of 14 changed files in this pull request and generated no comments.

Files not reviewed (9)

• src/runner/general_settings.cpp: Language not supported
• src/runner/general_settings.h: Language not supported
• src/settings-ui/Settings.UI/SettingsXAML/Flyout/LaunchPage.xaml: Language not supported
• src/settings-ui/Settings.UI/SettingsXAML/Flyout/ShellPage.xaml: Language not supported
• src/settings-ui/Settings.UI/SettingsXAML/FlyoutWindow.xaml: Language not supported
• src/settings-ui/Settings.UI/SettingsXAML/Views/GeneralPage.xaml: Language not supported
• src/settings-ui/Settings.UI/SettingsXAML/Views/PowerLauncherPage.xaml: Language not supported
• src/settings-ui/Settings.UI/Strings/en-us/Resources.resw: Language not supported
• src/common/ManagedCommon/ThemeHelpers.cs: Evaluated as low risk

Comments suppressed due to low confidence (1)

src/settings-ui/Settings.UI/ViewModels/GeneralViewModel.cs:394

• The FlyoutThemeIndex property does not have explicit test coverage. Add tests to ensure its correct behavior.

public int FlyoutThemeIndex