Themes
- 5 minutes to read
The DevExpress Blazor component suite ships with a set of built-in DevExpress themes. You can also use a bootstrap-external stylesheet to apply external Bootstrap themes. As the following Blazor Grid image gallery illustrates, you can apply a variety of themes to individual Blazor UI components.
DevExpress Blazing Berry
DevExpress Blazing Dark
DevExpress Purple
DevExpress Office White
Bootswatch Cerulean
Bootswatch Journal
Bootswatch Solar
Bootswatch Superhero
Fluent Light (CTP)
Fluent Dark (CTP)
To see how a theme affects the appearance of various DevExpress components, feel free to explore the DevExpress Blazor Demos. A theme switcher in the top right corner of each demo page allows you to apply DevExpress, Bootstrap-based, and Fluent (CTP) themes. The Bootstrap section includes the default theme and a few samples from the Bootswatch library.
You can create UI prototypes based on DevExpress Blazor components. Refer to the following topic for more information: DevExpress Blazor UI Kit on Figma.
Apply a Built-in DevExpress Theme
Once you have installed DevExpress Blazor components, the following DevExpress themes are available as DevExpress.Blazor dependencies:
- Blazing Berry
- Blazing Dark
- Purple
- Office White
- Fluent Light (CTP)
- Fluent Dark (CTP)
You can choose one of these built-in themes when you create a new Blazor project. Refer to the following topic for instructions: Create a Blazor Server or WebAssembly Project.
To apply a built-in theme manually, add a link to the corresponding stylesheet. Edit the <head> section in the Components/App.razor file.
Place the theme link before other links. Note that DevExpress built-in themes (except Fluent themes) include stylesheets for both Bootstrap v4 and v5. Make sure that the stylesheet version and your application’s Bootstrap version match.
If you do not implement any solutions to refresh cached resources on user machines, inject the IFileVersionProvider interface in the layout file. If you did not create the project from the DevExpress template, you also need to add the corresponding service in the Program.cs file:
builder.Services.AddMvc();
The interface ensures that web browsers on user machines use the actual version of DevExpress CSS resources instead of the previously cached version. Refer to HTTP caching for more information about the browser cache.
@using Microsoft.AspNetCore.Mvc.ViewFeatures
@inject IFileVersionProvider FileVersionProvider
<head>
@*...*@
@* Bootstrap 5 *@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
@* Bootstrap 4 *@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs4.min.css") rel="stylesheet" />
<link href=@AppendVersion("css/site.css") rel="stylesheet" />
@*...*@
</head>
@code {
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}
You can customize DevExpress themes. Refer to the following topic for more information and instructions: DevExpress Theme Customization.
Important
The Fluent theme is currently available as a community technology preview (CTP) and does not support customizations.
Apply an External Bootstrap Theme
The built-in bootstrap-external stylesheet allows you to apply an external Bootstrap-based theme. In this case, DevExpress Blazor components read CSS variables (colors and fonts) from this theme, but ignore other theme settings and CSS styles.
Follow the steps below to apply an external Bootstrap-based theme to your application:
- Download a Bootstrap-based theme. You can use one of the free themes available in the Bootswatch library. Note the Bootstrap version that your theme uses - v4 or v5. The bootstrap-external stylesheet and application (BootstrapVersion) should match that version number.
- Copy the theme’s files to your application’s wwwroot/css folder.
- Add a link to the theme’s stylesheet before other links in the
<head>section of the Components/App.razor file. - In the same file, add a link to the bootstrap-external stylesheet below your theme’s stylesheet.
If you do not implement any solutions to refresh cached resources on user machines, inject the IFileVersionProvider interface in the layout file. If you did not create the project from the DevExpress template, you also need to add the corresponding service in the Program.cs file:
builder.Services.AddMvc();The interface ensures that web browsers on user machines use the actual version of DevExpress CSS resources instead of the previously cached version. Refer to HTTP caching for more information about the browser cache.
The following code snippet applies the Pulse Bootswatch theme:
@using Microsoft.AspNetCore.Mvc.ViewFeatures
@inject IFileVersionProvider FileVersionProvider
<head>
@*...*@
<link href=@AppendVersion("css/pulse/bootstrap.min.css") rel="stylesheet" />
@* Bootstrap 5 *@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css") rel="stylesheet" />
@* Bootstrap 4 *@
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css") rel="stylesheet" />
<link href=@AppendVersion("css/site.css") rel="stylesheet" />
@*...*@
</head>
@code {
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}
DevExpress Blazor components also support color modes introduced in Bootstrap 5.3. For example, when you apply an external Bootstrap-based theme, you can also switch to dark mode.
@using Microsoft.AspNetCore.Mvc.ViewFeatures
@inject IFileVersionProvider FileVersionProvider
<html lang="en" data-bs-theme="dark">
<head>
@*...*@
<link rel="stylesheet" href=@AppendVersion("css/bootstrap/bootstrap.min.css") />
@* Bootstrap 5 *@
<link rel="stylesheet" href=@AppendVersion("_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css") />
@* Bootstrap 4 *@
<link rel="stylesheet" href=@AppendVersion("_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css") />
<link href=@AppendVersion("css/site.css" rel="stylesheet") />
@*...*@
</head>
</html>
@code {
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}