Current filter:
                                You should refresh the page.
                                  • UPDATED:

                                    Information in this article has become outdated. Please refer to our documentation related to Web Dashboard theming instead:
                                    HTML JavaScript Dashboard Control - Themes and Styles
                                    ASP.NET Web Forms Dashboard Control - Themes and Styles
                                    ASP.NET MVC Dashboard Extension - Themes and Styles
                                    ASP.NET Core Dashboard Control - Themes and Styles

                                    OBSOLETE INFORMATION:

                                    DevExpress Web Dashboard currently supports four themes based on those used by DevExtreme widgets. This gives you a way to deliver consistent applications if you use both DevExtreme controls and Dashboard in application UI.

                                     
                                    Support for Additional Themes in v19.2

                                    Due to popular demand, we extended the list of supported themes. DevExpress Dashboard v19.2 allows you to apply and customize the following DevExtreme themes:

                                    Light
                                    Dark
                                    Carmine
                                    Dark Moon
                                    Green Mist
                                    Dark Violet
                                    Soft Blue
                                    Light Compact
                                    Dark Compact
                                    Carmine Compact
                                    Dark Moon Compact
                                    Green Mist Compact
                                    Dark Violet Compact
                                    Soft Blue Compact

                                     
                                    API required to apply a theme hasn't changed. For detailed steps, refer to one of the following articles depending on the target platform:

                                    ASP.NET Web Forms Dashboard Control - Appearance Customization
                                    ASP.NET MVC Dashboard Control - Appearance Customization
                                    ASP.NET Core Dashboard Control - Appearance Customization
                                    HTML JavaScript Dashboard Control - Appearance Customization

                                     
                                    New Default Theme

                                    We used to extend DevExtreme themes with custom colors. For example, we introduced a custom selection color (blue).

                                    To better integrate with DevExtreme, the Dashboard now uses only colors listed in the applied theme. It means that the default light and dark themes will look differently in v19.2.

                                    We are going to ship custom light and dark themes for those who prefer the previously available look and feel. Take a look at an example: Light Blue (custom theme).

                                     
                                    Customize Themes

                                    If you need to create a custom Dashboard theme or need to apply a custom DevExtreme theme you created using its ThemeBuilder, you'll need to familiarize yourself with the new Dashboard Theme Builder CLI (command line interface).

                                    The Dashboard Theme Builder CLI is a command line tool based on Node.js. It was designed to work together with DevExtreme ThemeBuilder to allow you to create a custom Web Dashboard theme with ease.

                                     
                                    Create a Custom Theme

                                    Follow the steps below:

                                    1. Make sure you have Node.js and npm installed on your machine.
                                    2. Create a new folder.
                                    3. Using the command prompt, install DevExpress Dashboard CLI, DevExtreme Theme Builder, devexpress-dashboard and @devexpress/analytics-core packages:
                                    npm install devexpress-dashboard-cli@19.2-next devextreme-themebuilder@19.2-next devexpress-dashboard@19.2-next @devexpress/analytics-core@19.2-next
                                    4. Navigate to https://devexpress.github.io/ThemeBuilder/. Create a custom theme based on "Generic", name it "my-theme", and export metadata to file. Refer to the ThemeBuilder article to learn how to work with the DevExtreme Theme Builder tool.
                                    5. Copy the downloaded JSON file (“dx.generic.my-theme.json”) to the folder you created in step 2.
                                    6. Edit "dx.generic.my-theme.json” and add the following properties to the root to override certain colors at the dashboard level:
                                    [JavaScript]
                                    ... "items": [        { "key": "@base-accent", "value": "#cf5f64" }     ],     "dashboardItems": [        { "key": "@color19", "value": "#cf5f64" }     ],   "analyticsItems": [         { "key": "@color9", "value": "#cf5f64" }     ] ...

                                    If you do not want to test the Theme Builder right now, we generated a sample JSON file with our customizations so you can place it into the work folder:

                                    [JavaScript]
                                    { "version": "19.1.4", "baseTheme": "generic.dark", "outputColorScheme": "my-theme", "items": [ { "key": "@base-accent", "value": "#cf5f64" } ], "dashboardItems": [ { "key": "@color19", "value": "#cf5f64" } ], "analyticsItems": [ { "key": "@color9", "value": "#cf5f64" } ] }
                                    7. Use the command prompt to execute the following command. This builds the CSS files for your custom theme:
                                    npx devexpress-dashboard-cli build-theme --input-file dx.generic.my-theme.json --out-dir . --save-devExtreme-Css --save-analytics-Css

                                    The following CSS files will be generated:

                                    • dx.my-theme.css
                                    • dx-analytics.my-theme.css
                                    • dx-dashboard.my-theme.css

                                    Please refer to the following link to see the Web Dashboard's look and feel based these customizations:

                                    Web Dashboard - Red Wine custom theme

                                     
                                    Apply a Custom Theme

                                    First, create a "my-theme" folder in the Content folder of your Web Application, and paste the generated CSS files into it: "dx.my-theme.css", "dx-analytics.my-theme.css", and "dx-dashboard.my-theme.css".

                                    Further steps depend on the target platform.

                                    ASP.NET Web Forms and MVC Dashboard Control:

                                    1. Register a new theme in Global.asax:
                                    [C#]
                                    using DevExpress.Web; using DevExpress.DashboardWeb; //... protected void Application_Start() { //... CustomColorSchemes .Configure("my-theme") .AddDevExtremeStyle(@"Content/my-theme/dx.my-theme.css") .AddAnalyticsStyle(@"Content/my-theme/dx-analytics.my-theme.css") .AddDashboardStyle(@"Content/my-theme/dx-dashboard.my-theme.css"); }
                                    [VB.NET]
                                    Imports DevExpress.Web Imports DevExpress.DashboardWeb '... Protected Sub Application_Start() '... CustomColorSchemes.Configure("my-theme") _ .AddDevExtremeStyle("Content/my-theme/dx.my-theme.css") _ .AddAnalyticsStyle("Content/my-theme/dx-analytics.my-theme.css") _ .AddDashboardStyle("Content/my-theme/dx-dashboard.my-theme.css") End Sub
                                    2. Apply the theme to a Web Dashboard Control.
                                    • ASP.NET Web Forms Dashboard Control:
                                    [ASPx]
                                    <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" ColorScheme="my-theme"> </dx:ASPxDashboard>
                                    • ASP.NET MVC Dashboard Control:
                                    [C#]
                                    @Html.DevExpress().GetStyleSheets( "my-theme", new StyleSheet { ExtensionType = ExtensionType.Dashboard } )
                                    [VB.NET]
                                    @Html.DevExpress().GetStyleSheets( "my-theme", New StyleSheet With {.ExtensionSuite = ExtensionSuite.Dashboard} )

                                    ASP.NET Core and HTML JS Dashboard Control

                                    To apply a custom theme, register generated CSS files instead of the default listings:

                                    [HTML]
                                    <link href="node_modules/devextreme/dist/css/dx.common.css" rel="stylesheet" /> <link href="Content/my-theme/dx.my-theme.css" rel="stylesheet" /> <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css" rel="stylesheet" /> <link href="Content/my-theme/dx-analytics.my-theme.css" rel="stylesheet" /> <link href="node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css" rel="stylesheet" /> <link href="Content/my-theme/dx-dashboard.my-theme.css" rel="stylesheet" />

                                    ASP.NET Core Dashboard also required that you disable automatic script and style registration mechanism and register all resources manually:

                                    1. Remove the following calls from the Layout page: Html.DevExpress().StyleSheets and Html.DevExpress().Scripts.
                                    2. Modify the AddDevExpressControls method call as follows:
                                    [C#]
                                    services.AddDevExpressControls(settings => settings.Resources = ResourcesType.None);
                                    3. Check a complete list of required scripts for the dashboard in the Required Client Libraries article and register all necessary scripts manually in addition to the CSS files listed above.

                                     
                                    Help Us Understand Your Requirements

                                    We'd appreciate if you can spend a couple of minutes and write a comment that answers at least some or all of the following questions:

                                    Q1. Will you use the new Web Dashboard themes? Are you going to create custom themes?
                                    Q2. Which Web UI Frameworks do you use in your applications (Bootstrap, Angular Material, etc)?
                                    Q3. Which DevExtreme themes do you use in your applications? Do you create custom DevExtreme themes?
                                    Q4. Which CSS preprocessors do you use, if any (Sass, Less, Stylus)?

                                    Remember that you can always start a new conversation with us by submitting a new ticket to the DevExpress Support Center.

                                0 Solutions

                                Creation Date Importance Sort by