Themes

  • 2 minutes to read

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

Predefined themes

Predefined theme stylesheets are included in your project (in the Content folder) if you followed the Get Started instructions.

The stylesheets are linked in the DevExtremeBundleConfig.cs or DevExtremeBundleConfig.vb file. The default theme is Generic Light (dx.light.css).

public class DevExtremeBundleConfig {
    public static void RegisterBundles(BundleCollection bundles) {
        var styleBundle = new StyleBundle("~/Content/DevExtremeBundle");
        // ...
        styleBundle
            .Include("~/Content/dx.common.css")
            .Include("~/Content/dx.light.css");
        // ...
    }
}

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.

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.

To apply custom themes or color swatches, add the theme stylesheets to a project and link them in the DevExtremeBundleConfig.cs or DevExtremeBundleConfig.vb file.