https://github.com/syncfusionexamples/how-to-automatically-switch-syncfusion-control-themes-based-on-device-selected-theme-in-.net-maui
This repository contains a sample explaining how to automatically switch Syncfusion control themes based on device selected theme in .NET MAUI.
https://github.com/syncfusionexamples/how-to-automatically-switch-syncfusion-control-themes-based-on-device-selected-theme-in-.net-maui
maui maui-theme syncfusion-maui-control-theme syncfusion-maui-controls syncfusion-maui-theme system-theme-switch theme-switch
Last synced: 2 months ago
JSON representation
This repository contains a sample explaining how to automatically switch Syncfusion control themes based on device selected theme in .NET MAUI.
- Host: GitHub
- URL: https://github.com/syncfusionexamples/how-to-automatically-switch-syncfusion-control-themes-based-on-device-selected-theme-in-.net-maui
- Owner: SyncfusionExamples
- Created: 2024-08-20T12:22:24.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-08-23T09:45:34.000Z (10 months ago)
- Last Synced: 2025-02-08T20:47:50.629Z (4 months ago)
- Topics: maui, maui-theme, syncfusion-maui-control-theme, syncfusion-maui-controls, syncfusion-maui-theme, system-theme-switch, theme-switch
- Language: C#
- Homepage:
- Size: 218 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This article explains how to automatically switch [.NET MAUI Syncfusion control](https://www.syncfusion.com/maui-controls) themes based on the device-selected theme. This can be achieved by using [SyncfusionThemeResourceDictionary.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeResourceDictionary.html)
To enable automatic theme switching for Syncfusion controls based on the device's selected theme in a .NET MAUI application, you can utilize the `OnAppearing` method to assign the Syncfusion [VisualTheme](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Themes.SyncfusionThemeResourceDictionary.html#Syncfusion_Maui_Themes_SyncfusionThemeResourceDictionary_VisualTheme). Additionally, handling the `RequestedThemeChanged` event allows for dynamic updates to the Syncfusion controls' theme when the device's theme changes at runtime.
**App.xaml Configuration**
Ensure that your App.xaml includes the `SyncfusionThemeResourceDictionary`:
```
...
```
**XAML**
```
//Mainpage.xaml
```
**C#**
1. Override the `OnAppearing` method to apply the current theme and set up an event handler for theme changes.
2. Implement the `OnRequestedThemeChanged` event handler to respond to theme changes during runtime.
3. Define the `ApplyTheme` method to update the Syncfusion theme based on the current application theme.
```csharp
//Mainpage.xaml.cs
protected override void OnAppearing()
{
if (Application.Current != null)
{
this.ApplyTheme(Application.Current.RequestedTheme);
Application.Current.RequestedThemeChanged += OnRequestedThemeChanged;
}
base.OnAppearing();
}
private void OnRequestedThemeChanged(object? sender, AppThemeChangedEventArgs e)
{
this.ApplyTheme(e.RequestedTheme);
}
public void ApplyTheme(AppTheme appTheme)
{
if (Application.Current != null)
{
ICollection mergedDictionaries = Application.Current.Resources.MergedDictionaries;
if (mergedDictionaries != null)
{
var syncTheme = mergedDictionaries.OfType().FirstOrDefault();
if (syncTheme != null)
{
if (appTheme is AppTheme.Light)
{
syncTheme.VisualTheme = SfVisuals.MaterialLight;
}
else
{
syncTheme.VisualTheme = SfVisuals.MaterialDark;
}
}
}
}
}
```
**Output**
