Dark/Light Theme in .NET MAUI

Hi Guys, In this blog, we will learn how to achieve a Dark/Light Theme in .NET MAUI.

You might have come across a situation in your development experience where you need to change the theme of an app from Dark → Light or Light → Dark. So let's check how to achieve the same in .NET MAUI.

Light → Dark Theme

In this example, we will change the app theme by tapping the Change Theme button.

Let’s divide the implementation into 3 simple steps as shown below.

1. Create Dark & Light Theme ResourceDictionary.
2. Set Default Theme.
3. Change Theme on button tap.

Create Dark & Light Theme ResourceDictionary

So in the first step, we will have to create 2 ResourceDictionaries having LightTheme & DarkTheme color & other details.

To do so I have created a separate folder inside the Resources folder with the name Theme (You can give any name you want).

Theme Folder

As you can see in the above snippet I have created 2 ResourceDisctionaries with the name DarkTheme & LightTheme.

DrakTheme.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Resources.Theme.DarkTheme">

    <Color x:Key="PrimaryColor">#2B0B98</Color>
    <Color x:Key="PageBackgroundColor">Black</Color>
    <Color x:Key="AppTextColor">White</Color>
    <Color x:Key="AppButtonColor">Red</Color>

</ResourceDictionary>

LightTheme.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Resources.Theme.LightTheme">

    <Color x:Key="PrimaryColor">#B9E0FF</Color>
    <Color x:Key="PageBackgroundColor">White</Color>
    <Color x:Key="AppTextColor">Black</Color>
    <Color x:Key="AppButtonColor">Yellow</Color>

</ResourceDictionary>

Set Default Theme

Well in this step as mentioned we will simply Set one of the themes as a default theme. In our example, I have set the light theme as a default theme for the app.

To do that merge our light theme ResourceDictionary with App’s ResourceDsictionary.

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyApp"
             x:Class="MyApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Theme/LightTheme.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

This will set LightTheme.xaml as a default theme of the app

Change Theme on button tap

Here comes the main thing changing the theme on the button tap. To change the theme on the button we will follow the same practice of merging the ResourceDictionary with the App’s ResourceDictionary but this time we will achieve that programmatically.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage"
             Title="Light Theme"
             NavigationPage.HasNavigationBar="False"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <VerticalStackLayout VerticalOptions="FillAndExpand"
                         Spacing="50"
                         HorizontalOptions="FillAndExpand">


        <Frame HeightRequest="75"
               Padding="15,10,5,10"
               HasShadow="False"
               BackgroundColor="{DynamicResource PrimaryColor}">

            <Label x:Name="title"
                   Text="Light Theme"
               FontSize="25"
               HorizontalTextAlignment="Start"
                   VerticalTextAlignment="Center"
               TextColor="{DynamicResource AppTextColor}"/>

        </Frame>
        <Label Text="Click on button to change the theme"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalTextAlignment="Center"
               TextColor="{DynamicResource AppTextColor}"/>

        <Button Text="Change Theme"
                WidthRequest="200"
                FontSize="Large"
                Clicked="Button_Clicked"
                TextColor="{DynamicResource AppTextColor}"
                BackgroundColor="{DynamicResource AppButtonColor}"/>

    </VerticalStackLayout>

</ContentPage>

This is a simple page having some basic controls & a button to change the theme.

MainPage.xaml.cs (Code Behind)

using MyApp.Resources.Theme;
namespace MyApp;

public partial class MainPage : ContentPage
{
    bool darkTheme = false;
    public MainPage()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
        if (mergedDictionaries != null)
        {
            //You can filter out your additional resources & remove theme resource only
            mergedDictionaries.Clear();
            darkTheme = !darkTheme;
            if (darkTheme)
            {
                title.Text = "Dark Theme";
                mergedDictionaries.Add(new DarkTheme());
            }
            else
            {
                title.Text = "Light Theme";
                mergedDictionaries.Add(new LightTheme());
            }
        }
    }
}

On the button tap, I have removed the existing theme ResourceDictionary & added the new Theme to the app alternately.

Output Video

Do let me know what all topics to cover in the future thanks.