Themes

• Feb 16, 2021

You can change the appearance of DevExtreme ASP.NET MVC controls with DevExtreme themes or custom CSS 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).

DevExtremeBundleConfig.cs

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

DevExtremeBundleConfig.vb

Public Class DevExtremeBundleConfig
   Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection)
        Dim styleBundle = New StyleBundle("~/Content/DevExtremeBundle")
        ' ...
        styleBundle.Include("~/Content/dx.light.css")
        ' ...
    End Sub
End Class

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.