Skip to content

Latest commit

 

History

History
94 lines (72 loc) · 3.3 KB

change-telerik-theme-runtime.md

File metadata and controls

94 lines (72 loc) · 3.3 KB
title page_title description type slug tags res_type
Changing the Telerik Theme at Runtime Based on the Device Theme
Changing the Telerik Theme at Runtime Based on the Device Theme - .NET MAUI Knowledge Base
Learn how to dynamically switch the light/dark mode of the Telerik theme based on the theme of the target device.
how-to
change-telerik-theme-runtime
maui, theming, dark mode, dotnet maui, runtime
kb

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]({%slug themes-overview%}#using-the-maui-theming).

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:

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:

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:

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.

See Also