Skip to main content
BuyLog In
.NET Reporting Tools
Search in…
Docs > Web Reporting > ASP.NET MVC Reporting > Themes and Styles
A newer version of this page is available. .
All docs
V23.1
Reporting
Product Information
Changes and Backward Compatibility
.NET / .NET Core Support
Get Started with DevExpress Reporting
Create Reports
Detailed Guide to DevExpress Reporting
Visual Studio Report Designer
WinForms Reporting
WPF Reporting
Web Reporting
General Information
Document Viewer
Mobile Viewer UI
Report Designer
ASP.NET Web Forms Reporting
ASP.NET MVC Reporting
Document Viewer
End-User Report Designer
Report Parameters
ASP.NET MVC Reporting Extension Integration
Print and Export
Print and Export without a Preview
Themes and Styles
Application Deployment
ASP.NET Core Reporting
JavaScript Reporting
Blazor Reporting
Client-Side API
Application Security
Accessibility
.NET MAUI Reporting
WinUI Reporting
Cross-Platform .NET App UI
Backend Web API Service / REST API for Reporting
WCF Report Service
Discontinued Platforms
Security Considerations
Localize Reporting Applications
End-User Documentation
Redistribution and Deployment
API Reference
ASP.NET Core API Reference
Blazor API Reference
Client API Reference
Client API Reference (Web Forms & MVC)
Download CHM

Themes and Styles in ASP.NET MVC Applications

  • 3 minutes to read

Themes for Web Reporting are based on Generic, Generic Compact, Material Design, and Material Design Compact themes. For more information, review the following help topic: Predefined Themes. Due to design considerations, compact themes for web reporting components are the same as the themes without the word “compact” in their names.

You can view all available themes in our demo application. To switch themes, use the theme selector in the upper right corner of the application.

Run Demo

The predefined themes and their respective files are listed below. A theme consists of stylesheets that contain a collection of CSS classes.

Predefined Themes

Generic Themes

Theme CSS File (Generic) CSS File (Generic Compact)
Light dx.light.css
dx-analytics.light.css		 dx.light.compact.css
dx-analytics.light.compact.css
Dark dx.dark.css
dx-analytics.dark.css		 dx.dark.compact.css
dx-analytics.dark.compact.css
Carmine dx.carmine.css
dx-analytics.carmine.css		 dx.carmine.compact.css
dx-analytics.carmine.compact.css
Soft Blue dx.softblue.css
dx-analytics.softblue.css		 dx.softblue.compact.css
dx-analytics.softblue.compact.css >
Green Mist dx.greenmist.css
dx-analytics.greenmist.css		 dx.greenmist.compact.css
dx-analytics.greenmist.compact.css
Dark Moon dx.darkmoon.css
dx-analytics.darkmoon.css		 dx.darkmoon.compact.css
dx-analytics.darkmoon.compact.css
Dark Violet dx.darkviolet.css
dx-analytics.darkviolet.css		 dx.darkviolet.compact.css
dx-analytics.darkviolet.compact.css
**Light (Default)**

Light (Default)

**Dark**

Dark

**Carmine**

Carmine

**Dark Moon**

Dark Moon

**Soft Blue**

Soft Blue

**Dark Violet**

Dark Violet

**Green Mist**

Green Mist

**Contrast**

Contrast

How to Customize a Generic Theme

Review the following help topics for information on how to customize a color scheme in a web reporting application:

Material Design Themes

Theme CSS File (Material Design) CSS File (Material Design Compact)
Blue Light dx.material.blue.light.css
dx-analytics.material.blue.light.css		 dx.material.blue.light.compact.css
dx-analytics.material.blue.light.compact.css
Blue Dark dx.material.blue.dark.css
dx-analytics.material.blue.dark.css		 dx.material.blue.dark.compact.css
dx-analytics.material.blue.dark.compact.css
Lime Light dx.material.lime.light.css
dx-analytics.material.lime.light.css		 dx.material.lime.light.compact.css
dx-analytics.material.lime.light.compact.css
Lime Dark dx.material.lime.dark.css
dx-analytics.material.lime.dark.css		 dx.material.lime.dark.compact.css
dx-analytics.material.lime.dark.compact.css
Orange Light dx.material.orange.light.css
dx-analytics.material.orange.light.css		 dx.material.orange.light.compact.css
dx-analytics.material.orange.light.compact.css
Orange Dark dx.material.orange.dark.css
dx-analytics.material.orange.dark.css		 dx.material.orange.dark.compact.css
dx-analytics.material.orange.dark.compact.css
Purple Light dx.material.purple.light.css
dx-analytics.material.purple.light.css		 dx.material.purple.light.compact.css
dx-analytics.material.purple.light.compact.css
Purple Dark dx.material.purple.dark.css
dx-analytics.material.purple.dark.css		 dx.material.purple.dark.compact.css
dx-analytics.material.purple.dark.compact.css
Teal Light dx.material.teal.light.css
dx-analytics.material.teal.light.css		 dx.material.teal.light.compact.css
dx-analytics.material.teal.light.compact.css
Teal Dark dx.material.teal.dark.css
dx-analytics.material.teal.dark.css		 dx.material.teal.dark.compact.css
dx-analytics.material.teal.dark.compact.css
**Blue Light**

Blue Light

**Blue Dark**

Blue Dark

**Lime Light**

Lime Light

**Lime Dark**

Lime Dark

**Orange Light**

Orange Light

**Orange Dark**

Orange Dark

**Purple Light**

Purple Light

**Purple Dark**

Purple Dark

**Teal Light**

Teal Light

**Teal Dark**

Teal Dark

How to Apply a Predefined Theme

To apply a predefined theme, pass its name as the optional clientUIControlColorScheme parameter to the GetStyleSheets method. Use one of the DevExpress.Web.ASPxWebClientUIControl constant fields to get a theme name. The following code applies the Material Orange Light color scheme to the Reporting application:

<head>
...
@Html.DevExpress().GetStyleSheets(ASPxWebClientUIControl.ColorSchemeMaterialOrangeLight,
        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
)
...
</head>

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

using DevExpress.Web;
//...

    public class HomeController : Controller
    {
        public ActionResult Viewer() {
            ASPxWebClientUIControl.GlobalColorScheme = ASPxWebClientUIControl.ColorSchemeMaterialOrangeLight;
            return View();
        }
    //...
    }