.Net Maui Platform Specific Styling Lightdark Theme Complete Guide

Step 1: Create a .NET MAUI Project

If you haven’t already created a .NET MAUI project, you can do so by following these steps:

• Open Visual Studio.
• Create a new project.
• Select “.NET MAUI App” and click “Next.”
• Configure your project by entering a name, location, and solution name, then click “Create.”
• In the next window, you can choose which platforms you want to target. Click “Create” to proceed.

Step 2: Define Themes

.NET MAUI allows you to define styles in XAML that can be applied conditionally based on the theme (light or dark).

1. Open App.xaml and add resource dictionaries for light and dark themes:

<?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"
             x:Class="MauiAppTheme.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- Default light theme styles -->
                <ResourceDictionary Source="Resources/Styles/LightThemeStyles.xaml" />
                <!-- Default dark theme styles -->
                <ResourceDictionary Source="Resources/Styles/DarkThemeStyles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Step 3: Create Style Files

2. Create two .xaml files for light and dark themes in Resources/Styles.

• Right-click on Resources/Styles folder, select Add > New Item, then choose Resource Dictionary (.xaml).
• Name the first file LightThemeStyles.xaml and the second DarkThemeStyles.xaml.

3. Define some styles in each file. Here’s an example:

LightThemeStyles.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">
    <!-- Light theme-specific styles -->
    <Color x:Key="PrimaryColor">#3498db</Color>
    <Color x:Key="BackgroundColor">#ecf0f1</Color>
    <Color x:Key="TextColor">#2c3e50</Color>
    <Style x:Key="BaseStyle" TargetType="ContentView">
        <Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}" />
    </Style>
</ResourceDictionary>

DarkThemeStyles.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">
    <!-- Dark theme-specific styles -->
    <Color x:Key="PrimaryColor">#27ae60</Color>
    <Color x:Key="BackgroundColor">#34495e</Color>
    <Color x:Key="TextColor">#ecf0f1</Color>
    <Style x:Key="BaseStyle" TargetType="ContentView">
        <Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}" />
    </Style>
</ResourceDictionary>

Step 4: Apply Styles Based on Theme

4. Use the defined styles in your pages. Here’s an example 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="MauiAppTheme.MainPage"
             Style="{StaticResource BaseStyle}">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">
            <Label Text="Hello, .NET MAUI!"
                   TextColor="{StaticResource TextColor}"
                   SemanticProperties.Hint="Welcome to .NET MAUI"
                   FontSize="18" />
            <Button x:Name="ToggleThemeButton"
                    Text="Toggle Theme"
                    Clicked="ToggleThemeButton_Clicked"
                    TextColor="{StaticResource TextColor}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step 5: Toggle Theme Programmatically (Optional)

5. Add a button click event handler in MainPage.xaml.cs to toggle between light and dark themes:

using Microsoft.Maui.Controls;

namespace MauiAppTheme
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void ToggleThemeButton_Clicked(object sender, EventArgs e)
        {
            if (Application.Current.UserAppTheme == AppTheme.Light)
            {
                Application.Current.UserAppTheme = AppTheme.Dark;
            }
            else
            {
                Application.Current.UserAppTheme = AppTheme.Light;
            }
        }
    }
}

Step 6: Set Default Theme (Optional)

6. Optionally, set the default theme in App.xaml.cs:

using Microsoft.Maui.Controls;

namespace MauiAppTheme
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            // Set default theme to Light
            Application.Current.UserAppTheme = AppTheme.Light;

            MainPage = new MainPage();
        }
    }
}

Conclusion

You have now set up basic platform-specific styling for light and dark themes in a .NET MAUI application. This example demonstrates how to define, apply, and toggle themes using XAML and C#. You can expand on this by adding more styles and controls to your application.