Back to Devexpress

IThemeChangeService Interface

blazor-devexpress-dot-blazor-d408bba9.md

latest2.1 KB
Original Source

IThemeChangeService Interface

Allows you to switch between themes at runtime.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.Resources.v25.2.dll

NuGet Package : DevExpress.Blazor.Resources

Declaration

csharp
public interface IThemeChangeService

Remarks

The theme change service allows you to switch between multiple themes at runtime. To change an application’s theme, inject IThemeChangeService with the [Inject] attribute into a Razor page and call the SetTheme(ITheme) method:

razor
@inject IThemeChangeService ThemeChangeService
@rendermode InteractiveServer

<DxButton Text="Blazing Berry" Click="() => HandleClick(Themes.BlazingBerry)" />
<DxButton Text="Fluent" Click="() => HandleClick(Themes.Fluent)" />
<DxButton Text="Fluent Dark" Click="() => HandleClick(AppThemes.FluentDark)" />

@code {
    void HandleClick(ITheme theme) {
        ThemeChangeService.SetTheme(theme);
        // ...
    }
    public class AppThemes {
        public static ITheme FluentDark = Themes.Fluent.Clone(properties => {
            properties.Name = "FluentDark";
            properties.Mode = ThemeMode.Dark;
        });
        public static List<ITheme> All { get; private set; } = new List<ITheme>() {
            Themes.BlazingBerry,
            Themes.Fluent,
            FluentDark
        };
    }
}

You can inject IThemeChangeService and use its APIs to implement a custom theme switcher in your Blazor application. Refer to the following example for implementation details: Switch Themes and Size Modes within Blazor Apps at Runtime.

See Also

IThemeChangeService Members

DevExpress.Blazor Namespace