Themes
- 4 minutes to read
You can change the appearance of DevExtreme-based ASP.NET Core controls with DevExtreme themes or custom CSS themes.
Predefined theme stylesheets are included in your project if
- you created a project from the DevExtreme ASP.NET Core Application template.
- you added DevExtreme to an existing Visual Studio project.
- you configured a non Visual Studio project.
Predefined theme stylesheets are in the wwwroot/css/devextreme folder and linked in a project’s layout or a static asset bundler’s configuration files (see Bundle and minify static assets in ASP.NET Core for more information).
The default theme is Generic Light (dx.light.css).
<head>
...
<link href="~/lib/devextreme/css/dx.light.css" rel="stylesheet">
...
</head>
To use another theme, replace dx.light.css with the other theme’s stylesheet, for example, dx.dark.css or dx.material.blue.light.css.
Note
The DevExtreme Responsive ASP.NET Core Application project template uses a custom theme and a color swatch.
You can apply custom themes and color swatches in the same way as predefined themes: link them in a project’s layout or a bundler’s configuration.
Custom Themes
You can use the DevExtreme ThemeBuilder to create custom themes based on predefined DevExtreme themes or existing Bootstrap themes.
The DevExtreme ThemeBuilder also allows you to create color swatches - secondary color schemes used with a primary color scheme. You can use color swatches to change the color of different parts of your application.
For example, the DevExtreme Responsive ASP.NET Core Application project template does not use predefined themes. It uses the custom theme.base.css theme (as a base theme) and the theme.additional.css color swatch (that is applied to the navigation menu only). These stylesheets are based on DevExtreme Material themes.
The stylesheets are linked in _Layout.cshtml or in the bundler’s configuration files. Refer to the Bundle and minify static assets in ASP.NET Core article for more information.
The theme.additional.css color swatch scope is defined by the dx-swatch-additional selector:
<div class="menu-container dx-swatch-additional">
...
</div>
To use another theme in this project, do one of the following:
- Take the predefined Material theme stylesheets from the DevExtreme installation folder (the default path is C:/Program Files/DevExpress 23.2/DevExtreme/).
- Use ThemeBuilder to generate a base theme and color swatch.
Once you complete one of these steps, check the Site.css file. Some of the file colors may override theme colors. Comment, remove, or replace these colors:
.layout-body {
/*background-color: #f2f2f2;*/
flex: 1;
height: 100%;
min-height: 0;
}
.layout-body .content-footer {
display: block;
/*color: rgba(0,0,0,.609);*/
border-top: 1px solid rgba(0,0,0,.1);
padding-top: 20px;
padding-bottom: 24px;
}
Note
We periodically remove and remap unused constants to optimize our predefined themes. This can cause compatibility issues when you upgrade custom themes. We recommend saving your theme’s metadata to enable you to fix these issues. Refer to the Postpone Customization topic for more information.
Switch Between Themes at Runtime
Follow the steps below to change a theme at runtime.
Add a UI component that switches themes, for instance, SelectBox.
@(Html.DevExtreme().SelectBox() .ID("apptheme") .ValueExpr("theme") .DisplayExpr("name") .DataSource(new object[] { new { name = "Generic light", theme = "dx.light.css"}, new { name = "Generic dark", theme = "dx.dark.css"}, new { name = "Material blue light", theme = "dx.material.blue.light.compact.css"}, }) .OnSelectionChanged("changeTheme") )Save the selected theme to cookies and reload the page.
function changeTheme(e) { var selectedTheme = e.component.option("value"); document.cookie = "currentTheme=" + selectedTheme + ";path=/"; window.location.reload(); }Apply the theme to the page. To do this, change the link that points to a static CSS theme (usually, it is in the _Layout.cshtml file) to use a theme saved in cookies. You can add the dx-viewport CSS class to your page’s body to apply the theme to the entire page.
<head> <!-- ... --> @{ string theme = string.IsNullOrEmpty(Context.Request.Cookies["currentTheme"]) ? "dx.light.css" : Context.Request.Cookies["currentTheme"]; } <link href="~/css/devextreme/@theme" rel="stylesheet" /> </head> <body class="dx-viewport"> <!-- ... --> </body>