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 and load the light or dark mode of the Telerik Theme, for example:
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);
}
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.