Skip to main content


  • 4 minutes to read

You can change the appearance of DevExtreme-based ASP.NET Core controls with DevExtreme themes or custom CSS themes.

Predefined themes

Predefined theme stylesheets are included in your project if

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).

    <link href="~/lib/devextreme/css/dx.light.css" rel="stylesheet">

To use another theme, replace dx.light.css with the other theme’s stylesheet, for example, dx.dark.css or


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">

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.1/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;


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.

  1. Add a UI component that switches themes, for instance, SelectBox.

        .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 = ""},
  2. Save the selected theme to cookies and reload the page.

    function changeTheme(e) {
        var selectedTheme = e.component.option("value");
        document.cookie = "currentTheme=" + selectedTheme + ";path=/";
  3. 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.

        <!-- ... -->
            string theme = string.IsNullOrEmpty(Context.Request.Cookies["currentTheme"]) ? "dx.light.css" : Context.Request.Cookies["currentTheme"];
        <link href="~/css/devextreme/@theme" rel="stylesheet" /> 
    <body class="dx-viewport">
        <!-- ... -->