Themes

  • 3 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 bundleconfig.json. 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 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/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 21.1/DevExtreme/).
  • Use ThemeBuilder to generate a base theme and color swatch.
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.

  1. 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")
    )
    
  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=/";
        window.location.reload();
    }
    
  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.

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