xamlwinui-3windows-app-sdkwinui-xamlaccent-color

Unable to override SystemAccentColor via XAML (only works when changed in Windows Settings)


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


Solution

  • This is a known bug.

    As a workaround, you need to override:

    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.