Themes
- 2 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 bundleconfig.json. The default theme is Generic Light (dx.light.css).
<head>
...
<link href="~/lib/devextreme/css/dx.common.css" rel="stylesheet">
<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 bundleconfig.json.
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 bundleconfig.json:
{
"outputFileName": "wwwroot/css/vendor.css",
"inputFiles": [
"wwwroot/css/devextreme/dx.common.css",
"wwwroot/css/devextreme/theme.base.css",
"wwwroot/css/devextreme/theme.additional.css"
]
}
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 (x86)/DevExpress 20.1/DevExtreme/).
- Use ThemeBuilder to generate a base theme and color swatch.