Themes
- 4 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
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 and Bootstrap-based 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
You can choose one of these built-in themes when you create a new Blazor project. Refer to DevExpress Templates (DevExpress Installation) for instructions.
To apply a built-in theme manually, add a link to the corresponding stylesheet. Edit the <head> section in one of the following files:
- Pages/_Layout.cshtml for Blazor Server applications created with a Microsoft template in .NET 6
- Pages/_Host.cshtml for Blazor Server applications created with a DevExpress Template in .NET 6 and .NET 7 or with a Microsoft template in .NET 7
- wwwroot/index.html for Blazor WebAssembly or Hybrid applications in .NET 6 and .NET 7
- Components/App.razor for Blazor Web applications in .NET 8
Place the theme link before other links. Note that DevExpress built-in 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, add the asp-append-version attribute to the theme link. The attribute ensures that web browsers on user machines use the actual version of DevExpress CSS resources instead of a cached version. Refer to HTTP caching for more information about the browser cache.
<head>
@*...*@
@* Bootstrap 5 *@
<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" asp-append-version="true" rel="stylesheet"/>
@* Bootstrap 4 *@
<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs4.min.css" asp-append-version="true" rel="stylesheet"/>
<link href="css/site.css" rel="stylesheet" />
@*...*@
</head>
You can customize DevExpress themes. Refer to the following topic for more information and instructions: DevExpress Theme Customization.
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 Pages/_Layout.cshtml file (for Blazor Server in .NET 6), the wwwroot/index.html file (for Blazor WebAssembly or Hybrid in .NET 6 and .NET 7), or the Components/App.razor (for Blazor Web in .NET 8). - In the same file, add a link to the bootstrap-external stylesheet below your theme’s stylesheet.
The following code snippet demonstrates how to apply the Pulse Bootswatch theme:
<head>
@*...*@
<link rel="stylesheet" href="css/pulse/bootstrap.min.css" />
@* Bootstrap 5 *@
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
@* Bootstrap 4 *@
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css" />
<link href="css/site.css" rel="stylesheet" />
@*...*@
</head>
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.
<html lang="en" data-bs-theme="dark">
<head>
@*...*@
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
@* Bootstrap 5 *@
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
@* Bootstrap 4 *@
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css" />
<link href="css/site.css" rel="stylesheet" />
@*...*@
</head>
<html>