Daniel Hindrikes

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:

    #FFFFFF
    #333333

LightTheme:

    #333333
    #FFFFFF

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.

     #1e88e5
     #FFFFFF
     
    

    

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

    #FFFFFF
    #333333

    
         
    

LightTheme:

    #333333
    #FFFFFF

    
         
    

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