I am working with a WinUI 3 app and would like to change the system accent color for my application.
According to Microsoft Learn, the accent color can be overridden in App.xaml
like this:
<Application.Resources>
<ResourceDictionary>
<Color x:Key="SystemAccentColor">#107C10</Color>
</ResourceDictionary>
</Application.Resources>
Example: the selection highlight in a CalendarDatePicker (internally a CalendarView) still shows the default blue accent instead of the custom color.
Things I have already tried:
Overriding SystemAccentColor and SystemControlHighlightAccentBrush Overriding brushes like CalendarViewItemSelectedBackground Using
Moving my overrides before/after the XamlControlsResources merge in App.xaml
However, none of these seem to have any effect. For example, controls like CalendarDatePicker still use the default system accent color (blue in my case).
Interestingly, it does work when I change the accent color in the Windows system settings – then the app immediately picks up the new accent color. So the binding to the system works, but overriding the resource in XAML does not.
Question:
Is this a known limitation in WinUI 3?
Is there a way to override the accent color for my app only (without changing the global Windows settings)?
If not, is there any known workaround or roadmap item to support this?
Environment:
WinUI 3, .NET 8 Windows 11 23H2
This is a known bug.
As a workaround, you need to override:
SystemAccentColorLight1
SystemAccentColorLight2
SystemAccentColorLight3
SystemAccentColorDark1
SystemAccentColorDark2
SystemAccentColorDark3
Check the generic.xaml file to see how they are used.
For your case, the workaround should be something like this:
App.xaml.cs
<!-- Other app resources here -->
<Color x:Key="SystemAccentColorLight1">#107C10</Color>
<Color x:Key="SystemAccentColorLight2">#107C10</Color>
<Color x:Key="SystemAccentColorLight3">#107C10</Color>
<Color x:Key="SystemAccentColorDark1">#107C10</Color>
<Color x:Key="SystemAccentColorDark2">#107C10</Color>
<Color x:Key="SystemAccentColorDark3">#107C10</Color>
or:
<!-- Other app resources here -->
<Color x:Key="CustomSystemAccentColor">#107C10</Color>
<StaticResource x:Key="SystemAccentColorLight1" ResourceKey="CustomSystemAccentColor" />
<StaticResource x:Key="SystemAccentColorLight2" ResourceKey="CustomSystemAccentColor" />
<StaticResource x:Key="SystemAccentColorLight3" ResourceKey="CustomSystemAccentColor" />
<StaticResource x:Key="SystemAccentColorDark1" ResourceKey="CustomSystemAccentColor" />
<StaticResource x:Key="SystemAccentColorDark2" ResourceKey="CustomSystemAccentColor" />
<StaticResource x:Key="SystemAccentColorDark3" ResourceKey="CustomSystemAccentColor" />
Also see how ThemeResources should be implemented.