Uno: Overwriting accent color via SystemAccentColor key does not work

Created on 16 Jul 2020  路  3Comments  路  Source: unoplatform/uno

Current behavior

When SystemAccentColor is overwritten, it is not applied to derived resources like SystemColorControlAccentBrush.

Expected behavior

Should apply the color to all derived resources.

How to reproduce it (as minimally and precisely as possible)

<Application
    x:Class="HealthApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HealthApp">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            </ResourceDictionary.MergedDictionaries>
            <Color x:Key="SystemAccentColor">#E64A19</Color>
        </ResourceDictionary>
    </Application.Resources>
</Application>

On main page:

 <Grid Background="{ThemeResource SystemColorControlAccentBrush}"></Grid>

Probable reason for the issue

In Generic.xaml, each theme has:

            <!-- Added manually (not part of UWP's SystemResources.xaml) -->
            <Color x:Key="SystemColorHighlightColor">#FF3399FF</Color>
            <Color x:Key="SystemAccentColor">#FF0078D7</Color>
            <SolidColorBrush x:Key="SystemColorControlAccentBrush"
                     Color="{StaticResource SystemAccentColor}" />

I guess the SystemAccentColor is set as StaticResource, and providing a custom one in does not overwrite it for SystemColorControlAccentBrush.

Workaround

Define the SystemColorControlAccentBrush manually as well in App.xaml:

<Color x:Key="SystemAccentColor">#E64A19</Color>
<SolidColorBrush x:Key="SystemColorControlAccentBrush"
                     Color="{StaticResource SystemAccentColor}" />

Environment

Nuget Package:

Package Version(s):

Affected platform(s):

  • [x] iOS
  • [x] Android
  • [x] WebAssembly
  • [ ] WebAssembly renderers for Xamarin.Forms
  • [x] macOS
  • [ ] Windows
  • [ ] Build tasks
  • [ ] Solution Templates

Visual Studio:

  • [ ] 2017 (version: )
  • [x] 2019 (version: )
  • [ ] for Mac (version: )
kinbug projecresources projecstyling

All 3 comments

@davidjohnoliver actually it seems this could just about making sure the SystemColorControlAccentBrush and related use ThemeResource instead of StaticResource when referencing the accent color, correct?

@davidjohnoliver actually it seems this could just about making sure the SystemColorControlAccentBrush and related use ThemeResource instead of StaticResource when referencing the accent color, correct?

That should hopefully do it, yes.

It turns out this actually does work in the end. Overwriting just the Color is not possible, not even in UWP.

What does work is to override the brushes:

<Application.Resources>
    <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="Red" />
    <SolidColorBrush x:Key="SystemColorControlAccentBrush" Color="Red" />
</Application.Resources>

This properly overrides accent color and highlight accent color and these are then even reflected on controls like ToggleButton

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MatFillion picture MatFillion  路  4Comments

SuperJMN picture SuperJMN  路  3Comments

PylotLight picture PylotLight  路  3Comments

peternary picture peternary  路  3Comments

MartinZikmund picture MartinZikmund  路  3Comments