Themes
- 6 minutes to read
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. The following image gallery shows the Grid component with different themes:
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.
Apply a Built-in DevExpress Theme
Once you have installed DevExpress Blazor components, the following DevExpress themes are available to you as a DevExpress.Blazor dependency:
- Blazing Berry
- Blazing Dark
- Purple
- Office White
To apply a built-in theme, 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 in .NET6 or DevExpress template in .NET7
- Pages/_Host.cshtml for Blazor Server applications created with a Microsoft template in .NET7
- wwwroot/index.html for Blazor WebAssembly or Hybrid applications
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>
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) or the wwwroot/index.html file (for Blazor WebAssembly or Hybrid). - 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 Theme Customization
This section describes common concepts of DevExpress theme customization and includes step-by-step instructions on how to customize a DevExpress theme.
Common Concepts
Most DevExpress components use our own CSS selectors for rendering, while others use Bootstrap CSS selectors. Components that use DevExpress selectors are listed below:
Scheduler and Rich Text Editor components use Bootstrap selectors, while their inner components (such as buttons and dialogs) use DevExpress selectors.
A built-in DevExpress theme includes both DevExpress and Bootstrap CSS rules. To customize these rules, override values of DevExpress or Bootstrap SCSS variables, respectively.
DevExpress SCSS Variables
DevExpress SCSS variable names include a dx prefix. These variables define the appearance of DevExpress Blazor components that use our own CSS selectors. For instance, the dx-grid-bg and dx-grid-color variables allow you to customize the appearance of the Grid component:
$dx-grid-bg: #fff8e7 !default;
$dx-grid-color: #8b1a1a !default;
$dx-grid-header-bg: #efbbcc !default;
$dx-grid-header-color: #480607 !default;
You can find the complete list of DevExpress variables in files located in the themes folder. The default full path to these files is C:\Program Files\DevExpress 22.2\Components\Sources\DevExpress.Blazor.Themes\scss\components.
Bootstrap SCSS Variables
Bootstrap SCSS variables define the appearance of components that use Bootstrap CSS selectors. For instance, you can override values of the body-bg and body-color variables to customize the appearance of the page and the TreeView component, which uses Bootstrap selectors:
$body-bg: #f0f8ff !default;
$body-color: #6d9bc3 !default;
Customize a Built-in Theme
Follow the instructions described in the sections below to create a custom theme based on a DevExpress theme.
Set Up the Environment
Install Node.js and npm if needed.
Navigate to the folder with DevExpress themes. The default path is
C:\Program Files\DevExpress 22.2\Components\Sources\DevExpress.Blazor.Themes.Execute the following command in this folder to install dependencies:
npm iOn your local disk that stores DevExpress Blazor components, create a folder so that you can access DevExpress source code with a relative path.
In the newly created folder, execute the following command and name the package. You can skip the other package settings.
npm initThe command generates the package.json file.
Execute the following command to install the SASS dependency:
npm i sass -save-dev
Set Up the Theme Build
Create a file with the
*.scssextension, for example, scss-file-name.scss.In the package.json file, replace the Script attribute’s value with the following string:
"build": "sass ./scss-file-name.scss:<output-css-dir>/<theme-name>.css"When you execute a command to build your theme’s stylesheet, this script creates the <output-css-dir> folder and builds the <theme-name> stylesheet in this folder.
Open the scss-file-name.scss file and reference the DevExpress theme’s source file with a relative path, for example as follows:
@import "../../Program Files/DevExpress 22.2/Components/Sources/DevExpress.Blazor.Themes/scss/blazing-berry/blazing-berry.bs5.scss";
Customize a Theme
Before the
@importstatement, override default values of Bootstrap and/or DevExpress SCSS variables:/* Bootstrap variables */ $body-bg: #f0f8ff !default; $body-color: #6d9bc3 !default; /* DevExpress variables */ $dx-grid-bg: #fff8e7 !default; $dx-grid-color: #8b1a1a !default; $dx-grid-header-bg: #efbbcc !default; $dx-grid-header-color: #480607 !default; @import "../../Program Files/DevExpress 22.2/Components/Sources/DevExpress.Blazor.Themes/scss/blazing-berry/blazing-berry.bs5.scss";In your theme’s folder, execute the following command to build the stylesheet:
npm run build
Integrate a Custom Theme Into Your Application
Copy this stylesheet from the <output-css-dir> folder to the wwwroot/css folder of your project.
In the layout file (Pages/_Layout.cshtml or wwwroot/index.html), replace the link to the old stylesheet with a link to the newly added stylesheet:
<head> @*...*@ <link href="css/<theme-name>.css" rel="stylesheet" /> <link href="css/site.css" rel="stylesheet" /> @*...*@ </head>Build your project. You can now see the modified theme.
