How to override user accent color in UWP app

Question

I used Fluent XAML Theme Editor app to generate theme resources for my app.

My dark color scheme is black/grey with orange accent.

When I set accent color to green in Windows 10 Settings (see image below), this accent color comes through in some places.

As green and orange don't go well together, this looks really bad. How can I ensure that this does not happen?

Other similar questions on SO have answers that do NOT work for me (please do not mark as duplicate).

This is what I have done.

In Resource Dictionary I have defined orange accents for my "Dark" theme. This was generated by Fluent XAML Theme Editor (both accent and overrides are shades of orange):

<Windows10version1809:ColorPaletteResources Accent="#FFCC4D11"...
<!-- Override system generated accent colors -->
<Color x:Key="SystemAccentColorDark1">#FFD4632D</Color>
<Color x:Key="SystemAccentColorDark2">#FFDC7949</Color>
<Color x:Key="SystemAccentColorDark3">#FFE58E66</Color>
<Color x:Key="SystemAccentColorLight1">#FFB93E0E</Color>
<Color x:Key="SystemAccentColorLight2">#FFA62F0A</Color>
<Color x:Key="SystemAccentColorLight3">#FF932107</Color>

I have also added this as suggested elsewhere on SO:

<SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="#FFCC4D11" />

However, none of this works and Windows Settings green comes through anyway. For example, an accent button appears green on mouse hover. Green also appears in combo boxes and radio buttons on mouse hover.

The button is defined like this:

  <Button Style="{StaticResource AccentButtonStyle}" Content="Start"/>

This is what it looks like without and with hover. You don't need to be a graphic designer to know this is a bad look. I would like a different shade of orange to appear on hover. These shades are defined in the resource dictionary as SystemAccentColorDark1 - SystemAccentColorLight3, but they seem to be ignored for some reason.

How can I enforce my accent colors consistently? Obviously I do not want to have to re-style each control, I just want the colors from the resource dictionary to be used consistently.

UPDATE

System accent color is coming through even in Fluent XAML Theme Editor App itself, although not for the "Accent Button" but for "Check Box" and some other controls. See image where lime highlight is visible when mouse hovers over check box.

Answer 1

Found the problem.

In my app.xaml I had this for WinUI controls:

 <Application>
    <Application.Resources>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </Application.Resources>
</Application>

In each page I had a color theme as a resource dictionary.

   <Page.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="ThemeDictionary.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
    </Page.Resources>

For some reason that does not work correctly.

When I put both in the app.xaml and removed page resources, the weird problems with accent colors disappeared.

   <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                    <ResourceDictionary Source="ThemeDictionary.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
    </Application.Resources>

I am now having problems with ContentDialog, but that's a different SO post. Something is not right with this resource merging it seems...

Answer 2

One way to fix this, is to customize the control template.

I first copy the standard control template from:

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.19041.0\Generic\themeresources.xaml

into my resource dictionary.

Then I painstakingly modify the template to eradicate the offending colors. Something like this:

                       <VisualState x:Name="PointerOver">
                            <VisualState.Setters>
                                <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver" />
                                <Setter Target="RootGrid.Background" Value="Transparent" />
                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource SystemBaseLowColor}" />
                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemAccentColor}" />
                            </VisualState.Setters>

This is really tedious and unnecessary work, I am not sure why is no one from MS jumping on this. It is definitely not a problem just for me, this happens in the official Fluent XAML Editor app from MS.

Answer 3

According to generic.xaml (in C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.19041.0\Generic), the AccentButtonStyle uses the following for hover background:

AccentButtonBackgroundPointerOver

Which is a resource using SystemControlForegroundAccentBrush, which is in turn using SystemAccentColor. This is the resource you need to override to avoid the system accent color coming through, for example:

<Color x:Key="SystemAccentColor">#FFFF00</Color>

If you put this resource in a global location (like in Application.xaml), it should override the accent colour everywhere.

I'm still not sure why the accent colour generated by Fluent Theme editor is not being applied though.

I have tested this on a simple blank app - MainPage.xaml:

<Grid>
   <Button Style="{StaticResource AccentButtonStyle}" />
</Grid>

And App.xaml:

<Application
    x:Class="App8.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App8">
    <Application.Resources>
        <Color x:Key="SystemAccentColor">#FF0000</Color>
    </Application.Resources>
</Application>