How to Assign Values to Syncfusion Theme Keys for Different Themes in .NET MAUI?

This article demonstrates how to assign values to Syncfusion theme keys for different themes in .NET MAUI controls. Syncfusion® provides theme keys that allow developers to customize the appearance of controls. This article focuses on defining and applying custom values to these keys for both light and dark themes.

App.xaml Configuration

Ensure that your App.xaml includes the SyncfusionThemeResourceDictionary:

<Application ...             
             xmlns:theme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <theme:SyncfusionThemeResourceDictionary />
                ...
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Define Custom Resource Dictionaries for Light and Dark Themes

Create separate resource dictionaries for light and dark themes and assign different values to Syncfusion® theme keys for each. Here we customize the SfChatIncomingMessageAuthorTextColor key for .NET MAUI Chat control.

Dark Theme:

<ResourceDictionary …
             x:Class="ThemeSample.Resources.Styles.DarkTheme" >   

    <Color x:Key="SfChatIncomingMessageAuthorTextColor">HotPink</Color> 
</ResourceDictionary>

Light Theme:

<ResourceDictionary …
             x:Class="ThemeSample.Resources.Styles.LightTheme">  

    <Color x:Key="SfChatIncomingMessageAuthorTextColor">Green</Color>
</ResourceDictionary>

XAML

Initialize the Maui control.

<ContentPage.Content>
    <Grid RowDefinitions="50,*">
        <HorizontalStackLayout Grid.Row="0" Spacing="5" HorizontalOptions="End">
            <Label Text="Switch Theme" VerticalTextAlignment="Center"/>
            <Switch Toggled="Switch_Toggled" />
        </HorizontalStackLayout>
        <sfChat:SfChat x:Name="sfChat" Grid.Row="1"
           Messages="{Binding Messages}"
           CurrentUser="{Binding CurrentUser}"/>
    </Grid>
</ContentPage.Content>

C- Sharp

You can switch between the light and dark themes dynamically based on the system’s theme or user preferences. For instance, by using the RequestedThemeChanged event, update the SyncfusionThemeResourceDictionary at runtime to reflect the correct theme.

public partial class MainPage : ContentPage
{
    DarkTheme darkTheme = new DarkTheme();
    LightTheme lightTheme = new LightTheme();
    ICollection<ResourceDictionary> mergedDictionaries;
    SyncfusionThemeResourceDictionary theme ;
    public MainPage()
    {
        InitializeComponent();
        mergedDictionaries = Application.Current.Resources.MergedDictionaries;
        theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();
    }
    protected override void OnAppearing()
    {
        if (Application.Current != null)
        {
            this.ApplyTheme(Application.Current.RequestedTheme);
            Application.Current.RequestedThemeChanged += Current_RequestedThemeChanged;
        }
        base.OnAppearing();
    }
    private void Current_RequestedThemeChanged(object? sender, AppThemeChangedEventArgs e)
    {
        this.ApplyTheme(e.RequestedTheme);
    }
    public void ApplyTheme(AppTheme appTheme)
    {
        if (Application.Current != null)
        {               
            if (mergedDictionaries != null)
            {
                if (theme != null)
                {
                    if (appTheme is AppTheme.Light)
                    {
                        theme.VisualTheme = SfVisuals.MaterialLight;
                        if (darkTheme != null )
                        {
                            mergedDictionaries.Remove(darkTheme);
                        }
                        mergedDictionaries.Add(lightTheme);
                    }
                    else
                    {
                        theme.VisualTheme = SfVisuals.MaterialDark;
                        if (lightTheme != null)
                        {
                            mergedDictionaries.Remove(lightTheme);
                        }
                        mergedDictionaries.Add(darkTheme);
                    }
                }
            }
        }
    }
    private void Switch_Toggled(object sender, ToggledEventArgs e)
    {
        if (theme.VisualTheme is SfVisuals.MaterialDark)
        {
            this.ApplyTheme(AppTheme.Light);
        }
        else
        {
            this.ApplyTheme(AppTheme.Dark);
        }
    }
}

Output

Download the complete sample from GitHub

Conclusion
I hope you enjoyed learning how to assign values to Syncfusion® theme keys for different themes in .NET MAUI.
You can refer to our .NET MAUI controls feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. Explore our .NET Core controls example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!