Skip to main content
BuyLog In
.NET Reporting Tools
Search in…
Docs > Web Reporting > ASP.NET MVC Reporting > Themes and Styles
You are viewing help content for a version that is no longer maintained/updated.
All docs
V22.1
    • Reporting
    Product Information
    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
    End-User Documentation
    WinUI Reporting
    WCF Report Service
    Discontinued Platforms
    Localize Reporting Applications
    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();
        }
    //...
    }