What Changed
DevExpress Blazor themes and CSS styles that apply Bootstrap themes to DevExpress controls are now shipped with the DevExpress.Blazor.Themes NuGet package.
Reasons for Change
This change allows Blazor developers to apply DevExpress themes using NuGet instead of downloading CSS stylesheets from GitHub. It also simplifies version control and minimizes the risk of upgrade issues as the version of DevExpress themes is updated automatically with other DevExpress Blazor packages.
Impact on Existing Apps
All Blazor applications that use DevExpress controls have to be updated to reference CSS stylesheets from the DevExpress.Blazor.Themes NuGet package. This change does not affect the appearance of DevExpress controls or theme customizations, only the stylesheet reference syntax.
How to Update Existing Apps
Follow the steps below to update your application.
- Remove the link to the dx-blazor.css and dx-blazor.bs5.css stylesheets in the _Layout.cshtml file for Blazor Server apps or the index.html file in Blazor WebAssembly apps.
Razor// For Bootstrap 5
@*<link href="_content/DevExpress.Blazor/dx-blazor.bs5.css" rel="stylesheet" />*@
// For Bootstrap 4
@*<link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />*@
- Update the theme link in the same file.
- If you use one of the DevExpress themes, replace the old link to the stylesheet with the following:
Note that words in a theme name are separated by a hyphen:Razor// For Bootstrap 5 @*<link rel="stylesheet" href="css/bootstrap/<theme-name>.min.css" />*@ <link href="_content/DevExpress.Blazor.Themes/<theme-name>.bs5.min.css" rel="stylesheet" /> // For Bootstrap 4 @*<link rel="stylesheet" href="css/bootstrap/<theme-name>.min.css" />*@ <link href="_content/DevExpress.Blazor.Themes/<theme-name>.bs4.min.css" rel="stylesheet" />
office-white
,blazing-berry
,blazing-dark
. - If you use the standard Bootstrap theme that comes with Microsoft Blazor templates or any other Boostrap-based theme, add a link to the bootstrap-external stylesheet below your theme's stylesheet reference:Razor
<link rel="stylesheet" href="css/pulse/bootstrap.min.css" /> // For Bootstrap 5 <link href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" rel="stylesheet" /> // For Bootstrap 4 <link href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css" rel="stylesheet" />
- If you use one of the DevExpress themes, replace the old link to the stylesheet with the following:
- If you use Bootstrap 5, specify your Bootstrap version explicitly in Program.cs.
C#builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5);
If you want to customize a DevExpress theme, refer to the following topic for more information: Themes.