UWP: using SystemAccentColor

The personalization settings of Windows 10 includes a Colors section for choosing an accent color that is used throughout the system and by many apps (both modern and traditional desktop apps). The accent color can be set automatic where it is derived from the current background, or you can choose one from the palette as is shown in the following screenshot; 

 

The following image is an example of how the accent color is used in Microsoft Edge. With the accent color set to pink, you'll notice the pink border for the active window, and a pink selection highlight.

 

The cool thing is that you can also use the accent color in your own Universal Windows XAML app. The theme resource SystemAccentColor reflects the value of the current accent color of the system. Here's how to render a rectangle in the accent color. When the color is changed in the Windows 10 settings dialog, the change is immediately applied to the rectangle thanks to the ThemeResource markup extension.

<Rectangle Width="50" Height="50">
  <Rectangle.Fill>
    <SolidColorBrush Color="{ThemeResource SystemAccentColor}" />
  </Rectangle.Fill>
</Rectangle>

It should be noted that the default styles of many XAML controls also use (variations of) the SystemAccentColor theme resource. In most cases, you don't need to do anything to create a Universal Window XAML app that complies with the current color settings of the operation system.

Learn more about the ThemeResource markup extension in the MSDN documentation.



Latest News

RSS feed

Subscribe to the RSS feed and receive the latest news from First Floor Software in your favorite RSS reader.

Subscribe