Changing the Telerik Theme at Runtime Based on the Device Theme

Environment

Product	Progress® Telerik® UI for .NET MAUI
Product Version	8.0.0

Description

How can I change the Telerik theme at runtime based on the device's theme and dynamically switch between dark and light modes?

Solution

To ensure that the Telerik .NET MAUI controls respond to app theme changes correctly:

1. Enable the Telerik Theming in your app.

2. Detect the current system theme—use the Application.RequestedTheme property to get the current AppTheme.

2.1 Example with loading the light or dark Purple swatch of the Telerik theme:

• C#

private void ApplyTelerikTheme()
{
    var telerikTheming = Application.Current
        .Resources
        .MergedDictionaries
        .OfType<TelerikTheming>()
        .Single();

    var swatchName = Application.Current.RequestedTheme == AppTheme.Dark ? "Purple Dark" : "Purple";
    telerikTheming.Theme = TelerikTheming.Themes
        .Single(t => t.Theme == "Telerik" && t.Swatch == swatchName);
}

2.2 Example with loading the light or dark swatch of the Platform theme:

• C#

private void ApplyTelerikTheme()
{
    var telerikTheming = Application.Current
        .Resources
        .MergedDictionaries
        .OfType<TelerikTheming>()
        .Single();

    var swatchName = Application.Current.RequestedTheme == AppTheme.Dark ? "Dark" : "Light";
    telerikTheming.Theme = TelerikTheming.Themes
        .Single(t => t.Theme == "Platform" && t.Swatch == swatchName);
}

For more details on the Application.RequestedTheme property, see the Detect the current system theme | MS Learn topic.

3. Switch the Telerik theme to dark or light mode—use the Application.RequestedThemeChanged event to detect whenever the system theme has been changed and update the Telerik resources:

• C#

public App()
{
    InitializeComponent();

    Application.Current.UserAppTheme = AppTheme.Unspecified;
    Application.Current.RequestedThemeChanged += (s, e) => ApplyTelerikTheme();
    this.ApplyTelerikTheme();

    this.MainPage = new AppShell();
}

For more details on the Application.RequestedThemeChanged event, see the React to theme changes | MS Learn topic.