Change Accent Color in Windows 10 UWP

Question

I dont really want to use the accent color that the user has chosen in Windows in my app, and instead want to have my own color show. I can change it manually on all the items by by making new styles, but it is just in so many places in the normal controls, that it would be nice to do on the app level.

I tried setting <SolidColorBrush x:Key="SystemAccentColor" Color="#FFCB2128" /> but for some reason that does noting on some items and turns others like the video controls gray.

Solution 1

On Win10 UWP, System Accent color is defined as ThemeResource SystemControlHighlightAccentBrush. You can override it as following.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="Orange" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
        <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="Green" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="Light">
        <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="Blue" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Solution 2

To change accent color on every system control you have to redefine the system resource as follows.

Note that SystemAccentColor is a color, not a brush. If you don't redefine all other brushes, the color won't be applied on everything.

<ResourceDictionary.ThemeDictionaries>
  <ResourceDictionary x:Key="Default">     
    <Color x:Key="SystemAccentColor">#FF20A060</Color>  <!--Your accent color-->

    <SolidColorBrush x:Key="SystemControlBackgroundAccentBrush" Color="{ThemeResource SystemAccentColor}" />
    <SolidColorBrush x:Key="SystemControlDisabledAccentBrush" Color="{ThemeResource SystemAccentColor}" />
    <SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="{ThemeResource SystemAccentColor}" />
    <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="{ThemeResource SystemAccentColor}" />
    <SolidColorBrush x:Key="SystemControlHighlightAltAccentBrush" Color="{ThemeResource SystemAccentColor}" />
    <SolidColorBrush x:Key="SystemControlHighlightAltListAccentHighBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.9" />
    <SolidColorBrush x:Key="SystemControlHighlightAltListAccentLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.6" />
    <SolidColorBrush x:Key="SystemControlHighlightAltListAccentMediumBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.8" />
    <SolidColorBrush x:Key="SystemControlHighlightListAccentHighBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.9" />
    <SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.6" />
    <SolidColorBrush x:Key="SystemControlHighlightListAccentMediumBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.8" />
    <SolidColorBrush x:Key="SystemControlHyperlinkTextBrush" Color="{ThemeResource SystemAccentColor}" />
    <SolidColorBrush x:Key="ContentDialogBorderThemeBrush" Color="{ThemeResource SystemAccentColor}" />
    <SolidColorBrush x:Key="JumpListDefaultEnabledBackground" Color="{ThemeResource SystemAccentColor}" />
  </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Solution 3

Add the following to App.xaml if you are not using any templates or ResourceDictionaries:

<ResourceDictionary>
    <Color x:Key="SystemAccentColor">#FFCB2128</Color>
</ResourceDictionary>

If you are using the Minimal Template10 template, then add the following line to Styles/Custom.xaml after the CustomColor and ContrastColor values:

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

If you have your own ResourceDictionary somewhere else, linked from App.xaml, then similarly add the "Color" line there.

Solution 4

What worked for me was setting

 <SolidColorBrush x:Key="SystemAccentColor" Color="#FFCB2128" />
    <Color x:Key="SystemAltHighColor">#FFCB2128</Color>
    <Color x:Key="SystemAltLowColor">#FFCB2128</Color>
    <Color x:Key="SystemAltMediumColor">#FFCB2128</Color>
    <Color x:Key="SystemAltMediumHighColor">#FFCB2128</Color>
    <Color x:Key="SystemAltMediumLowColor">#FFCB2128</Color>
    <Color x:Key="SystemBaseHighColor">#FFCB2128</Color>
    <Color x:Key="SystemBaseLowColor">#FFCB2128</Color>
    <Color x:Key="SystemBaseMediumColor">#FFCB2128</Color>
    <Color x:Key="SystemBaseMediumHighColor">#FFCB2128</Color>
    <Color x:Key="SystemBaseMediumLowColor">#FFCB2128</Color>

In the app.xaml file in order to overwrite the onese set by windows.

View more solutions

Comments

[Brandon Seydel]

U need to set target types on ur style to automatically apply to types set in target types.

[Kasper S Mathiesen]

@Adriano Repetti That answer only applies to Windows Phone (8/8.1) and not windows 10 UWP. So it has not really been answered.

[Adriano Repetti]

Sorry, if it doesn't work then let me know and I'll retract close vote (actually vote to reopen...)

[Kasper S Mathiesen]

Thanks Brandon, but that is what I want to avoid, so i dont have to do it on all the controls I use, and instead overwrite the accentcolor in app.xaml or app.xaml.cs.

[Kasper S Mathiesen]

@AdrianoRepetti Unfortuneatly it does not work in UWP, I have already tried. :-(

[Brandon Seydel]

It does work u just set the target type in the style tag and set the property setters inside.

[Kasper S Mathiesen]

@BrandonSeydel If I understand you right I would still have to set a custom style for each control.

[David Medenjak]

it actually is enough to just supply SystemAccentColor, the rest will be applied accordingly... Maybe just since the last update (?)

[Tom Shane]

I'm not sure what last update you mean, but I have the latest Windows build and VS2015 Update 1 RC with updated version of UWP kit installed and if I define only SystemAccentColor, some controls use it, but some still keep displaying original color.

[David Medenjak]

Hi again! I just literally double checked. In my project all of those colors you listed change when setting SystemAccentColor and nothing more is needed.

[Tom Shane]

I would be really interested in your code, in fact the whole project, to test it on my machine. Would it be possible to share it somewhere for me to download? Thanks.

[David Medenjak]

I'm sorry, I can't do that. But I just added <Color x:Key="SystemAccentColor">#00FF00</Color> to github.com/Microsoft/Windows-universal-samples/tree/master/… in Application - Application.Resources - ResourceDictionary and everything went greeen as described. Maybe you just set the color for one theme and it gets overridden some place else? or it really is depending on some version.

[Tom Shane]

Sure, no problem, I just thought you have a testing project. Anyway, I have found the problem. The difference in my application is in that, that I redefine template for some controls. I don't manipulate the brushes, I just alter original template that applies for all controls of the type. In this case I have to refine all brushes. If I don't define new templates only "SystemAccentColor" is enough - just like you said. Thanks for helping me figure out the issue!

[David Medenjak]

That is good to know! But it brings up the question...Did you use StaticResource or ThemedResource in your controls? And if you were using staticResources, did you fix it by switching?

[Tom Shane]

They were just a copy of the original controls with minimal changes. No changes to their resources at all, so they all are using ThemeResource. Since I started with UWP I'm encountering such oddities all the time. It's a mess.

[yalematta]

I have changed it the way you did here and it works, but my ExtendedSplashScreen still have its Accent Color as White... Any idea why?

[vcapra1]

Where do you put this code? the mainfest? app.xaml? The page xaml??

[dex3703]

'SystemControlHighlightAccentBrush'! That's what I wanted. Thanks!

[Billy Jake O'Connor]

@vcapra1 Shove it in app.xaml.

[SuperJMN]

How do you override a Theme Resource using code? I'm trying, but no dice at all!

[PEK]

At least one color seems to be missing when targeting SDK 17134. In combo boxes the background color of the selected item seems to have been changed.