Themes and Styles for an ASP.NET MVC Application

• Feb 27, 2023
• 6 minutes to read

Supported Themes

You can apply two types of themes to a Web Dashboard:

Predefined themesYou can find the complete list in the table below. All the listed options are different modifications of the Generic, Generic Compact, and Material Design Compact DevExtreme themes.Custom themesYou can modify Generic and Generic Compact DevExtreme themes. This topic includes step-by-step instructions on theme customization.

Each theme consists of stylesheets that are applied when you use one of the color constants.

Generic Themes

Material Design Themes

Apply a Built-in Theme

To apply a theme, pass its name as the optional clientUIControlColorScheme parameter to the ExtensionsFactory.GetStyleSheets method.

View code:

• C#
• VB.NET

@Html.DevExpress().GetStyleSheets("carmine",
    // ...
    new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
) 
// ...

@Html.DevExpress().GetStyleSheets("carmine",
    ' ...
    New StyleSheet With {.ExtensionSuite = ExtensionSuite.Dashboard }
)
' ...

As an alternative, use the ASPxWebClientUIControl.GlobalColorScheme property to specify the theme.

• C#
• VB.NET

using DevExpress.Web;
//...

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ASPxWebClientUIControl.GlobalColorScheme = "carmine";
            return View();
        }
    //...
    }

Imports DevExpress.Web
' ...

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index() As ActionResult
        ASPxWebClientUIControl.GlobalColorScheme = "carmine"
        Return View()
        ' ...
    End Function
End Class

Customize Themes

Warning

Customization is available only for Generic and Generic Compact themes.

The DevExpress Dashboard CLI is used with the DevExtreme ThemeBuilder to create a custom theme for the Web Dashboard.

Theme customization involves the following basic steps:

1. Use the DevExtreme ThemeBuilder tool to customize an existing theme and export the results.
2. Add Dashboard-specific settings to the generated resource files.
3. Use the DevExpress Dashboard CLI to convert the customized resource files into a Web Dashboard theme.
4. Register the new theme in your application.

Create a Custom Theme

1. Make sure you have Node.js and npm installed on your machine.

2. Open the ThemeBuilder. Create a custom theme based on Generic themes. For instance, you can use the Light theme as a base and change its accent color from blue (#337ab7) to yellow (#fdb400).

3. Set the color scheme name (for example, “light-yellow”) and use the Export Metadata → Download Metadata File button to export metadata in a JSON format.

4. Copy the downloaded JSON file ( dx.generic.light-yellow.json ) to an empty folder.

5. Edit dx.generic.light-yellow.json and add the dashboardItems property to override the accent colors at the dashboard level:

6. In the folder you created in Step 4, execute the command that installs the devexpress-dashboard-cli package and builds the CSS files for your custom JSON file. Use the same version of the devexpress-dashboard-cli package as the version of DevExpress packages that you use in your application:

Color Constants

The Web Dashboard uses color constants to paint the control’s elements. The colors of the color constants listed in the table below can be customized. Changes to specific dashboard elements’ colors do not affect the basic DevExtreme colors.

Show Table

Apply a Custom Theme

A custom theme’s icons should be in the same folder as the theme’s CSS files. You can find the icons folder in the following directory: C:\Program Files\DevExpress 25.2\Components\Sources\DevExpress.Web.Resources\Css\DevExtreme.

Copy the icons folder to the directory that contains your theme:

To apply a custom theme, do the following:

1. Create the Content | custom-themes folder in the project and put the generated CSS files in the created folder.

2. Register the theme in the Global.asax file:

3. Apply the custom theme to the Web Dashboard:

The image below shows the Web Dashboard with the custom Light Yellow theme: