Our journey about adding Dark Theme to our UWP XAML application [1/4]

In these articles I will go over my journey of updating all of the UI of an UWP application. The original application is a UWP XAML/C# application that runs on Xbox and Windows 10 Desktop that only had one design theme.

On the left the application with Light theme and on the right with Dark theme

The aim of these articles is to go over the different steps that were needed to correctly convert this application so that it could support a Light and Dark theme. As a point of reference this application is used on Xbox and Windows 10 Desktop and has 90k lines of C# code and 29 XAML views.

This article was broken into 4 parts:

• [Part 1] Setting up your app to handle the new Dark Theme, managing your assets with the different themes.
• [Part 2] creating a design system view which will allow you have a quick overview of how the different element look like in the different themes. Selecting you dark theme colors.
• [Part 3] Selecting you dark theme colors and migrating different application UI Elements (buttons, headers, etc) and DataTemplates
• [Part 4] Final design review on the application with Figma

Adding a Dark theme to an application is more than just inversing all of your whites to blacks and blacks to whites, or setting the background of your application to black =)

Here is what the current application looked like:

Home screen

Following video feed

Search

The application has a horizontal navigation bar at the top that allows users to navigate these and has different kinds of listview and gridviews that are horizontal and vertical.

Setting up our application to handle our new dark theme.

The first step was to remove in the xaml code all of the references to RequestedTheme=’’Light’’ (ctrl+shift + F replace RequestedTheme=’’Light’’ by “” look for Entire Solution). Next we needed to have a way to store which theme is being used by the user. For our application is was decided that we would create the property IsDarkTheme under our app settings properties.

In our App.xaml.cs file we added a new method called UpdateAppTheme() that would manage which theme is loaded when the application loads.

Next, we started setting up our Style.xaml file with
<ResourceDictionary x:Key=”Light”>

and

<ResourceDictionary x:Key=”Dark”>

which will hold our different styles depending which theme the user selects to use.

Creating new SolidColorBrush Keys

It was decided to create new SolidColorBrush keys with the prefix Default which would allow us to:

• Quickly see if this property is Light/Dark theme compliant
• Create a new layer of SolidColorBrush which can be applied only where it was needed. This allowed us to not break the whole UI application. If we had decided to change all of the whites to blacks then we would have broken all of the UI colors of elements that used this key, which was not what we wished.

Here is a quick example of what out new Style.xaml file looks like:

Selecting Assets depending on the theme

Next, came the issue of selecting the correct Assets depending on the application theme.

First, we believed that because we were loading navigation assets depending on what the user had access to we could also change our assets on the go as follows:

This ended up being bad idea, as on our navigation items we have multiple actions that can happen, and it ended up giving us this:

We also did not wish to have go over every assets with a foreach to change our Assets.

It was decided that we would create a Class that would hold the assets that needed to change when the application theme changed. DmAppAssets was born, this would allow to easily access the needed assets in C# code and XAML code if needed.

Here is a sample of what our DmAppAssets looks like:

Here is how we load our navigation assets in C#:

In XAML we can use the Binding property to correctly bind the correct Asset as follows:

C#:
public DmAppAssets _aAppAssets = new DmAppAssets();
public DmAppAssets AppAssets
{
 get
 {
  return _aAppAssets;
 }
 set
 {
  Set(ref _aAppAssets, value);
 }
}XAML:
<Image Height=”10" Source=”{Binding AppAssets.ActionsCrossClose}” />

the only trick was that we needed to add the DmAppAssets property to our Mvvm ViewModel.

As you can see preparing our application to support a Dark Theme is mainly time consuming as you must be careful to not over complexify your current application.

Next, we will go over [Part 2] creating a design system view which will allow you have a quick overview of how the different element look like in the different themes.