Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Themes

  • 6 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.

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.

Themes Online Demos

You can create UI prototypes based on DevExpress Blazor components. Refer to the following topic for more information: DevExpress Blazor UI Kit on Figma.

Watch Video: Applying DevExpress and Bootstrap Themes to Blazor Applications

View Example: How to implement a Theme Switcher in Blazor applications

#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 (except Fluent) 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 these files:

  • Components/App.razor for Blazor Web applications
  • wwwroot/index.html for hybrid applications

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.

We recommend that you refresh cached resources on user machines to avoid rendering issues. For example, you can add a file version to a theme link as follows:

cshtml
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />

@code {
    private string AppendVersion(string path) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
}

Note: this solution requires that you move a theme link to a Razor component in hybrid applications.

You can find another solution that uses IFileVersionProvider in applications generated by our project templates. This solution does not work in Blazor hybrid applications.

Such techniques ensure that web browsers on user machines use the current version of DevExpress CSS resources instead of the previously cached version. Refer to HTTP caching for more information about the browser cache.

<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) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
}

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:

  1. 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.
  2. Copy the theme’s files to your application’s wwwroot/css folder.
  3. Add a link to the theme’s stylesheet before other links in the <head> section of the Components/App.razor file.
  4. In the same file, add a link to the bootstrap-external stylesheet below your theme’s stylesheet.
  5. We recommend that you refresh cached resources on user machines to avoid rendering issues. For example, you can add a file version to a theme link as follows:

    cshtml
    <link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
    
    @code {
        private string AppendVersion(string path) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
    }
    

    Note: this solution requires that you move a theme link to a Razor component in hybrid applications.

    You can find another solution that uses IFileVersionProvider in applications generated by our project templates. This solution does not work in Blazor hybrid applications.

    Such techniques ensure that web browsers on user machines use the current 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:

<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) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
}

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=@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) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
}