How to use Theme Service

This topic explains how to use the ThemeService for runtime theme switching and persisting user theme preferences.

Automatic Registration with DI

Note

The ThemeService is automatically registered when you enable DI (Dependency Injection) or Extensions UnoFeature in your Uno Platform project. This means you typically do not need to explicitly register it using UseThemeSwitching unless you are not using DI.

Step-by-step (Typical Usage with DI)

1. Consume ThemeService: Inject the ThemeService into your view models or other services where you need to manipulate the theme.

   public class SettingsViewModel
   {
       private readonly IThemeService _themeService;
   
       public SettingsViewModel(IThemeService themeService)
       {
           _themeService = themeService;
       }
   
       public async Task ToggleThemeAsync()
       {
           var currentTheme = _themeService.Theme;
           var newTheme = currentTheme == AppTheme.Dark ? AppTheme.Light : AppTheme.Dark;
           await _themeService.SetThemeAsync(newTheme);
       }
   }
   

Step-by-step (Manual Registration without DI or Advanced Scenarios)

If you are not using DI, Extensions, or require more control over the registration process, you can manually register the ThemeService:

1. When using the Uno.Sdk, follow this guide on how to add ThemeService UnoFeature.

2. Register ThemeService: Add the ThemeService to your project's host builder configuration using UseThemeSwitching.

   public partial class App : Application
   {
       protected override void OnLaunched(LaunchActivatedEventArgs args)
       {
           var builder = this.CreateBuilder(args)
               .Configure(host => host
                   .UseThemeSwitching()
               );
       }
   }
   

3. Consume ThemeService: (Same as the DI usage) Inject the ThemeService as shown in the previous example.

Source Code

ThemeService Implementation