Custom Themes in UWP Application

Question

I am developing a UWP Application in which I want to set the theme dynamically from a file(Containing color codes).

The file which I have created is an XML file whose nodes contains the color codes which are mapped to the controls of the application.

The user can update the color codes in the provided XML file, which should reflect the theme changes in the application.

Can I set any custom location for this file so that the user can edit the contents of the file?

Is this the right approach for implementing themes in a UWP Application.

Also, I am quite new in the UWP technology.

Thanks in advance.

Answer 1

By default, the UWP apps support two themes - Light and Dark.

You can specify your app's theme in the App.xaml by setting the RequestedTheme property to either one of the values (it is set to Light by default) or in App.xaml.cs in App constructor using RequestedTheme = ApplicationTheme.Light; (changing it anywhere later will cause an exception to be thrown).

If you don't set the RequestedTheme property, it will reflect the theme set in Settings > Personalization > Colors on any W10 Mobile device or W10 PC running Anniversary update and newer version. On older Windows 10 desktop versions it'll be Light.

You can also set the theme of any specific FrameworkElement which is set to ElementTheme.Default by default so it inherits the theme from its parent.

<StackPanel RequestedTheme="Light">
   <TextBlock>Text using light theme.</TextBlock>
   <TextBlock RequestedTheme="Dark">Text using dark theme.</TextBlock>
</StackPanel>

For color customization UWPs usually use Accent color specified by user in Settings > Personalization > Colors too.

To reflect theme and accent color set in Settings app specifying custom color for some element, you have to use ThemeResource. You can use predefined XAML theme resources, for example this Border's background color will be #FFFFFFFF in Light theme and #FF000000 in Dark theme.

<Border Background="{ThemeResource SystemControlBackgroundAltHighBrush}"/>

Or you can use SystemControlBackgroundAccentBrush which will reflect the Accent color chosen in Settings app.

You can also write your own theme dictionary that specifies colors for each theme. Here is an example of a simple theme dictionary:

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
        <SolidColorBrush x:Key="MyButtonBackgroundThemeBrush" Color="White"/
        <SolidColorBrush x:Key="MyButtonForegroundThemeBrush" Color="Black"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
        <SolidColorBrush x:Key="MyButtonBackgroundThemeBrush" Color="Black"/>
        <SolidColorBrush x:Key="MyButtonForegroundThemeBrush" Color="White"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

You will use it like this:

<Button Content="Themed button"
        Background="{ThemeResource MyButtonBackgroundThemeBrush}"
        Foreground="{ThemeResource MyButtonForegroundThemeBrush}"/
        />

The button's background will be White and foreground will be Black in the Light theme while Black and White in the Dark theme.

You can read more about the ThemeResource, themes, HighContrast theme and default theme resources here.

Also I recommend you to watch this video on Channel 9 where are the XAML themes explained even with the HighContrast theme.