ASP.NET Core Blazor Application Appearance
- 2 minutes to read
Themes
The Solution Wizard creates new ASP.NET Core Blazor UI applications with 20+ themes:
- The standard Boostrap theme (“Default”).
- 3 DevExpress themes (Blazing Berry, Purple, Office White).
- Free Bootswatch themes.
Add Themes to an Application
You can add new themes to your application in the appsettings.json file or in code.
In ‘appsettings.json’
The application configuration MySolution.Blazor.Server/appsettings.json file has a ThemeSwitcher section that specifies Theme Switcher settings and available themes.
"DevExpress": {
"ExpressApp": {
"ThemeSwitcher": {
"DefaultItemName": "Office White",
"ShowSizeModeSwitcher": true,
"Groups": [
{
"Caption": "DevExpress Themes",
"Items": [
{
"Caption": "Blazing Berry",
"Url": "css/themes/blazing berry/bootstrap.min.css",
"Color": "#5c2d91"
},
{
"Caption": "Purple",
"Url": "css/themes/purple/bootstrap.min.css",
"Color": "#7989ff"
},
{
"Caption": "Office White",
"Url": "css/themes/office white/bootstrap.min.css",
"Color": "#fe7109"
}
]
},
// ...
]
}
}
}
Options:
- ShowSizeModeSwitcher
- Specifies whether the Size Mode switcher is enabled. See the following article for information about size mode: Size Mode.
- DefaultItemName
- Specifies the default theme’s name.
- Groups
- A collection of theme groups. Each group must have a caption and a collection of themes.
- Caption
- A group’s or a theme’s name.
- Items
- A collection ot theme items.
- Url
- A link to a theme’s bootstrap.min.css file.
- Color
- A color assigned to a particular theme and displayed in the Theme Switcher next to the theme.
In Code
Add the following code to the MySolution.Blazor.Server/Startup.cs file to add new themes:
services.AddXaf<MainDemoBlazorApplication>(Configuration).AddThemeOptions(o => {
o.DefaultItemName = "Office White";
o.ShowSizeModeSwitcher = true;
o.AddGroup("DevExpress Themes").AddThemes(
("Blazing Berry", "css/themes/blazing berry/bootstrap.min.css", "#5c2d91"),
("Purple", "css/themes/purple/bootstrap.min.css", "#7989ff")
);
});
Theme Switcher
The Theme Switcher is available in the gear menu if your project has more than one theme.
Disable Theme Switcher
To disable Theme Switcher, specify a default theme and remove the other themes from your application.
The code sample below demonstrates how to set “Office White” as a default theme and disable the Theme Switcher.
"DevExpress": {
"ExpressApp": {
"ThemeSwitcher": {
"DefaultItemName": "Office White",
"ShowSizeModeSwitcher": true,
"Groups": [
{
"Caption": "DevExpress Themes",
"Items": [
{
"Caption": "Office White",
"Url": "css/themes/office white/bootstrap.min.css",
"Color": "#fe7109"
}
]
}
// other themes are removed
]
}
}
}