This example demonstrates how to add a Theme Switcher to your application. Users can switch between DevExpress Fluent and Classic themes and external Bootstrap themes. This example uses the DxResourceManager.RegisterTheme(ITheme) method to apply a theme at application startup and the IThemeChangeService.SetTheme() method to change the theme at runtime.
The theme switcher includes the following themes:
- DevExpress Fluent (Light Blue and Dark Blue)
- DevExpress Classic (Blazing Berry, Blazing Dark, Purple, and Office White)
- Bootstrap External
Create a Themes.cs file and configure themes:
-
For Classic themes, choose a theme from the built-in DevExpress Blazor Themes collection:
public static readonly ITheme BlazingBerry = Themes.BlazingBerry; public static readonly ITheme BlazingDark = Themes.BlazingDark; public static readonly ITheme Purple = Themes.Purple; public static readonly ITheme OfficeWhite = Themes.OfficeWhite;
-
For Fluent themes, call the Clone() method to add theme stylesheets and change theme mode:
public static readonly ITheme FluentLight = Themes.Fluent.Clone(props => { props.AddFilePaths("css/theme-fluent.css"); }); public static readonly ITheme FluentDark = Themes.Fluent.Clone(props => { props.Mode = ThemeMode.Dark; props.AddFilePaths("css/theme-fluent.css"); });
-
For Bootstrap themes, call the Clone() method to add a Bootstrap theme stylesheet. Use the same approach if you want to apply your own stylesheets.
public static readonly ITheme BootstrapDefault = Themes.BootstrapExternal.Clone(props => { props.Name = "Bootstrap"; props.AddFilePaths("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"); props.AddFilePaths("css/theme-bs.css"); });
-
Create a list of themes:
public enum MyTheme { Fluent_Light, Fluent_Dark, Blazing_Berry, Blazing_Dark, Purple, Office_White, Bootstrap }
Follow the steps below to add a Theme Switcher to your application:
-
Copy this example's ThemeSwitcher folder to your project.
-
Copy the example's switcher-resources folder to your application's wwwroot folder. The switcher-resources folder has the following structure:
- js/cookies-manager.js
Contains a function that stores the theme in a cookie variable. - theme-switcher.css
Contains CSS rules that define the Theme Switcher's appearance and behavior.
- js/cookies-manager.js
-
Add the following services to your application (copy the corresponding files):
- ThemeService.cs
Implements IThemeChangeService to switch themes at runtime and uses the SetTheme() method to apply the selected theme. - Themes.cs
Creates a list of themes for the theme switcher using the built-in DevExpres Blazor Themes collection (for Classic themes) and the Clone() method for Fluent and Bootstrap themes. - CookiesService.cs
Manages cookies.
- ThemeService.cs
-
In the _Imports.razor file, import
{ProjectName}.Components.ThemeSwitcherand{ProjectName}.Servicesnamespaces:@using {ProjectName}.Components.ThemeSwitcher @using {ProjectName}.Services
-
Register
ThemesServiceandCookiesServicein the Program.cs file. Ensure that this file also containsMvcandHttpContextAccessorservices:builder.Services.AddMvc(); builder.Services.AddHttpContextAccessor(); builder.Services.AddScoped<ThemesService>(); builder.Services.AddTransient<CookiesService>();
-
Add the following code to the App.razor file:
-
Inject services with the [Inject] attribute:
@inject IHttpContextAccessor HttpContextAccessor @inject ThemesService ThemesService
-
Add script and stylesheet links to the file's
<head>section and call the DxResourceManager.RegisterTheme(ITheme) method to apply a theme on application startup:<head> @* ... *@ <script src=@AppendVersion("switcher-resources/js/cookies-manager.js")></script> <link href=@AppendVersion("switcher-resources/theme-switcher.css") rel="stylesheet" /> @DxResourceManager.RegisterTheme(InitialTheme) @* ... *@ </head>
-
Obtain the theme from cookies during component initialization:
@code { private ITheme InitialTheme; protected override void OnInitialized() { InitialTheme = ThemesService.GetThemeFromCookies(HttpContextAccessor); } }
-
-
Declare the Theme Switcher component in the MainLayout.razor file:
<Drawer> @* ... *@ <ThemeSwitcher /> @* ... *@ </Drawer>
Our DevExpress Blazor themes affect DevExpress components only. To apply theme-specific styles to non-DevExpress elements or the entire application, add external stylesheets to the theme using its AddFilePaths() method:
Bootstrap themes require external theme-specific stylesheets. Once you register a Bootstrap theme, call the
Clone()method and add the stylesheet using theme properties.
public static readonly ITheme BootstrapDefault = Themes.BootstrapExternal.Clone(props => {
props.Name = "Bootstrap";
// Links a Bootstrap theme stylesheet
props.AddFilePaths("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css");
// Links a custom stylesheet
props.AddFilePaths("css/theme-bs.css");
});If you want to use dark Bootstrap themes, implement custom logic that applies a data-bs-theme attribute to the root element:
data-bs-theme="light"for light themesdata-bs-theme="dark"for dark themes
Refer to the following article for more information: Color Modes.
- ThemeSwitcher (folder)
- switcher-resources (folder)
- Services (folder)
- App.razor
- MainLayout.razor
- Program.cs
(you will be redirected to DevExpress.com to submit your response)
