The ThemeService allows you to change the theme of your application at runtime. It provides a set of methods to change the theme, get the current theme, and listen to theme changes.
In this demo a dropdown allows switching between all available themes (Material, Standard, Fluent, Default, Humanistic, Software), with toggles for Right-to-left direction and WCAG compliant colors, and ThemeChanged event logging theme changes to console.
Console log
The Radzen.Blazor library provides a built-in service that persists the current theme in a cookie. This means that the theme will be remembered even after the user closes the browser or navigates to a different page. The theme will be restored when the user returns to the application.
Program.cs file(s) and register the CookieThemeService:
builder.Services.AddRadzenCookieThemeService(options =>
{
options.Name = "MyApplicationTheme"; // The name of the cookie
options.Duration = TimeSpan.FromDays(365); // The duration of the cookie
});
MainLayout.razor and inject the CookieThemeService:@inject CookieThemeService CookieThemeService
App.razor file of your application and add this code:@code {
[CascadingParameter]
private HttpContext HttpContext { get; set; }
[Inject]
private ThemeService ThemeService { get; set; }
[Inject]
private IOptions<CookieThemeServiceOptions> Options { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
if (HttpContext != null)
{
var theme = HttpContext.Request.Cookies["MyApplicationTheme"];
if (!string.IsNullOrEmpty(theme))
{
ThemeService.SetTheme(theme, false);
}
else
{
HttpContext.Response.Cookies.Append("MyApplicationTheme", "material" , new CookieOptions { Secure = Options.Value.IsSecure, Expires = DateTimeOffset.Now.Add(Options.Value.Duration) });
}
}
}
}