DarkMode and LightMode with MergedDictionaries

iOS 13 introduces Dark Mode, David Ortinau has written a great blog post on the official Xamarin blog about Dark Mode and Xamairn.Forms, https://devblogs.microsoft.com/xamarin/modernizing-ios-apps-dark-mode-xamarin/.

In this post, I will show how we can use MergedDictionaries to work with a base theme that applies both to the dark mode and the light mode.

First, create two new XAML pages and change the base class to ResourceDictionary, name of DarkTheme and the other on LightTheme. In those, we should define all colors that you should use for our application.

DarkTheme:

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="MyApp.DarkTheme">
    <Color x:Key="TextColor">#FFFFFF</Color>
    <Color x:Key="PrimaryBackgroundColor">#333333</Color>
</ResourceDictionary>

LightTheme:

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="MyApp.LightTheme">
    <Color x:Key="TextColor">#333333</Color>
    <Color x:Key="PrimaryBackgroundColor">#FFFFFF</Color>
</ResourceDictionary>

When you have done that we can create a new XAML page and also here we will change the base class to ResourceDictinary. In this resource dictionary, we will define the styles for elements in our application. Here we also can define common colors. Use DymanicResource for properties that will be updated it theme/mode changes. Read more about that in the blog post from David Ortinau.

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                    x:Class="MyApp.BaseTheme">
 
     <Color x:Key="PrimaryColor">#1e88e5</Color>
     <Color x:Key="PrimaryTextColor">#FFFFFF</Color>
 
    <Style TargetType="Label">
      <Setter Property="TextColor" Value="{DynamicResource TextColor}" />
    </Style>
 
    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
        <Setter Property="TextColor" Value="{StaticResource PrimaryTextColor}" />
        <Setter Property="FontAttributes" Value="Bold" />
    </Style>
</ResourceDictionary>

Now we will merge this with the resource dictionaries for dark theme and light theme. Import the namespace and add the base theme to both of the themes.

DarkTheme

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    xmlns:local="clr-namespace:MyApp"
                    x:Class="MyApp.DarkTheme">
    <Color x:Key="TextColor">#FFFFFF</Color>
    <Color x:Key="PrimaryBackgroundColor">#333333</Color>
 
    <ResourceDictionary.MergedDictionaries>
         <local:BaseTheme />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

LightTheme:

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    xmlns:local="clr-namespace:MyApp"
                    x:Class="MyApp.LightTheme">
    <Color x:Key="TextColor">#333333</Color>
    <Color x:Key="PrimaryBackgroundColor">#FFFFFF</Color>
 
    <ResourceDictionary.MergedDictionaries>
         <local:BaseTheme />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

And now you can apply themes like in the official Xamarn blog post.

3 thoughts on “DarkMode and LightMode with MergedDictionaries

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.