CmdPal: Light, dark, pink, and unicorns

[jiripolasek]

Summary of the Pull Request

This PR introduces user settings for app mode themes (dark, light, or system) and background customization options, including custom colors, system accent colors, or custom images.

• Adds a new page to the Settings window with new appearance settings and moves some existing settings there as well.
• Introduces a new core-level service abstraction, IThemeService, that holds the state for the current theme.
• Uses the helper class ResourceSwapper to update application-level XAML resources. The way WinUI / XAML handles these is painful, and XAML Hot Reload is pain². Initialization must be lazy, as XAML resources can only be accessed after the window is activated.
• ThemeService takes app and system settings and selects one of the registered IThemeProviders to calculate visuals and choose the appropriate XAML resources.
  • At the moment, there are two:
    • NormalThemeProvider
      • Provides the current uncolorized light and dark styles
      • ms-appx:///Styles/Theme.Normal.xaml
    • ColorfulThemeProvider
      • Style that matches the Windows 11 visual style (based on the Start menu) and colors
      • ms-appx:///Styles/Theme.Colorful.xaml
      • Applied when the background is colorized or a background image is selected
• The app theme is applied only on the main window (WindowThemeSynchronizer helper class can be used to synchronize other windows if needed).
• Adds a new dependency on Microsoft.Graphics.Win2D.
• Adds a custom color picker popup; the one from the Community Toolkit occasionally loses the selected color.
• Flyby: separates the keyword tag and localizable label for pages in the Settings window navigation.

Pictures? Pictures!

Matching Windows accent color and tint:

PR Checklist

• [x] Closes: #38444
• [ ] Communication: I've discussed this with core contributors already. If the 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
• [ ] Dev docs: Added/updated
• [ ] New binaries: Added on the required places
  • [ ] JSON for signing for new binaries
  • [ ] WXS for installer for new binaries and localization folder
  • [ ] YML for CI pipeline for new test projects
  • [ ] YML for signed pipeline
• [ ] Documentation updated: If checked, please file a pull request on our docs repo and link it here: #xxx

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

[niels9001]

Tried it out, loving it :)!

One question to consider is whether to create a separate settings card for the background image or simply add it as another background option alongside the colors.

Yeah, this came to mind when I was playing with the settings - I wonder if we should combine this with the color combobox? Depending on the selection we'd show the right settings?

[jiripolasek]

Tried it out, loving it :)!

One question to consider is whether to create a separate settings card for the background image or simply add it as another background option alongside the colors.

Yeah, this came to mind when I was playing with the settings - I wonder if we should combine this with the color combobox? Depending on the selection we'd show the right settings?

@niels9001 Here's a branch that combines them, plus adds blur and brightness controls along with improved tint adjustment for the background image. I planned to include this later, but added it now to give us a better perspective on what needs to be in UI.

Moving pictures included inside: https://github.com/jiripolasek/PowerToys/pull/15

Edit: merged

[jiripolasek]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 1 pipeline(s).

[michaeljolley]

@jiripolasek, I can't get this to build locally. Not sure what's going on.

[jiripolasek]

@michaeljolley: on it

[michaeljolley]

@michaeljolley: on it

Disregard. It's on my end.

[jiripolasek]

@michaeljolley: on it

Disregard. It's on my end.

A trained squad of squirrels went nuts and managed to resolve the merge conflict 🐿️🐿️🐿️

[github-actions[bot]]

@check-spelling-bot Report

:red_circle: Please review

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

Unrecognized words (2)

icf IRDP

These words are not needed and should be removed

irdp

To accept these unrecognized words as correct and remove the previously acknowledged and now absent words, you could run the following commands

... in a clone of the [email protected]:jiripolasek/PowerToys.git repository on the feature/38444-cmdpal-with-colors-and-unicorns branch (:information_source: how do I use this?):

curl -s -S -L 'https://raw.githubusercontent.com/check-spelling/check-spelling/c635c2f3f714eec2fcf27b643a1919b9a811ef2e/apply.pl' |
perl - 'https://github.com/microsoft/PowerToys/actions/runs/19789713468/attempts/1' &&
git commit -m 'Update check-spelling metadata'

Errors :x: (1)

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

:x: Errors	Count
:x: check-file-path	1

See :x: Event descriptions for more information.

If the flagged items are :exploding_head: false positives

If items relate to a ...

• binary file (or some other file you wouldn't want to check at all).

  Please add a file path to the excludes.txt file matching the containing file.

  File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

  ^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

• well-formed pattern.

  If you can write a pattern that would match it, try adding it to the patterns.txt file.

  Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

  Note that patterns can't match multiline strings.

[michaeljolley]

Any ideas why it freezes when I click Browse for the background image? No explorer or file picker appears.

[jiripolasek]

Any ideas why it freezes when I click Browse for the background image? No explorer or file picker appears.

Nope, that’s never happened to me so far. What configuration are you using -- Debug or Release -- and is the debugger attached?

[michaeljolley]

Any ideas why it freezes when I click Browse for the background image? No explorer or file picker appears.

Nope, that’s never happened to me so far. What configuration are you using -- Debug or Release -- and is the debugger attached?

In debug. Never gets a return from var file = await picker.PickSingleFileAsync()!; and no picker appears.

[jiripolasek]

Any ideas why it freezes when I click Browse for the background image? No explorer or file picker appears.

Nope, that’s never happened to me so far. What configuration are you using -- Debug or Release -- and is the debugger attached?

In debug. Never gets a return from var file = await picker.PickSingleFileAsync()!; and no picker appears.

Thanks. I can’t replicate the issue, so I’ll need to investigate further. Could you try copying that method into a new WinUI 3 app, so we can exclude a local environment?

[jiripolasek]

@michaeljolley So far now luck. I can't replicate the problem with picker anywhere :(

[jiripolasek]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 1 pipeline(s).

[github-actions[bot]]

@check-spelling-bot Report

:red_circle: Please review

See the :open_file_folder: files view, the :scroll:action log, or :memo: job summary for details.

Unrecognized words (1)

uis

These words are not needed and should be removed

CLITo CVS Notavailable toolgood Uninitializes

To accept these unrecognized words as correct and remove the previously acknowledged and now absent words, you could run the following commands

... in a clone of the [email protected]:jiripolasek/PowerToys.git repository on the feature/38444-cmdpal-with-colors-and-unicorns branch (:information_source: how do I use this?):

curl -s -S -L 'https://raw.githubusercontent.com/check-spelling/check-spelling/c635c2f3f714eec2fcf27b643a1919b9a811ef2e/apply.pl' |
perl - 'https://github.com/microsoft/PowerToys/actions/runs/20064630276/attempts/1' &&
git commit -m 'Update check-spelling metadata'

If the flagged items are :exploding_head: false positives

If items relate to a ...

• binary file (or some other file you wouldn't want to check at all).

  Please add a file path to the excludes.txt file matching the containing file.

  File paths are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your files.

  ^ refers to the file's path from the root of the repository, so ^README\.md$ would exclude README.md (on whichever branch you're using).

• well-formed pattern.

  If you can write a pattern that would match it, try adding it to the patterns.txt file.

  Patterns are Perl 5 Regular Expressions - you can test yours before committing to verify it will match your lines.

  Note that patterns can't match multiline strings.

[jiripolasek]

okay 58/58. Couple last comments.

If you don't want to do the move out of Core thing, then I can as a follow-up

@zadjii-msft Actually, I want to, with extreme pleasure. Pushed. It's a bit rough, I've got to properly re-test everything a bit more, and some things could be smoothed out, but I think it's stable enough to go ahead with the review.

[jiripolasek]

@zadjii-msft Can we add Microsoft.Graphics.Win2D to PowerToysPublicDependencies feed? It looked like it's there when I tried to query it from there, but CI can't see it.

I think I’ve covered all the notes, and the last step is to merge in the main, just to be sure

[DHowett]

@jiripolasek done! all versions 1.3.0 to 1.3.2 are now in-feed

[DHowett]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 1 pipeline(s).

[jiripolasek]

@jiripolasek done! all versions 1.3.0 to 1.3.2 are now in-feed

@DHowett Many thanks!

[jiripolasek]