Dark Theme to your UWP XAML application, migrating DataTemplate and UI Elements[3/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 are 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 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] Migrating different application UI Elements (buttons, headers, etc) and DataTemplates
- [Part 4] Final design review on the application
Dark Themed UI Elements
In our design view we decided to round up all of the different headers, textbox styles, input box , date picker, combo box and buttons we are using in the application which gave us this
The only major issue that we had was with the different colors of our text depending on what background it was on.
And as most application will be using DataTemplates to template data in your GridView or ListView we hope that we could use a ContentPresenter with generated data to see how it would look like in dark or light mode
However as you can see the RequestedTheme never seemed to use our Dark values on my different ContentPresenters.
To be 100% honest I did not dig deeper why this was happening, we ended up creating a new view called DataTemplatesDesignSystem.xaml that held all of our different DataTemplates, forced the app to DarkTheme and voila:
Quick and dirty.. as it did not respond to my initial need to have everything in one view… but we needed to keep moving so sadly that was that.
When we get the chance to work on the DarkTheme design mode, we will check to see how we can improve the Dark theme request on ContentPresenter but as of today we did not update this.
Lastly, we will go over [Part 4] Final design review on the application with Figma.