Themes and Styles

• Jan 24, 2020
• 6 minutes to read

Supported Themes

The Web Dashboard allows you to apply and customize themes based on the DevExtreme Generic and Generic Compact themes.

Each theme consists of stylesheets that contain a collection of CSS classes:

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

Before v19.2, the Web Dashboard used DevExtreme Light and Dark themes (and their compact counterparts) with custom colors. For example, the custom selection color was blue.

With v19.2, the default Light and Dark themes differ from the customized Light and Dark themes in v19.1: the Web Dashboard uses only colors listed in the applied DevExtreme theme.

If you prefer the previously available colors, use the custom Light Blue and Dark Blue themes (and their compact counterparts):

Image	Theme	CSS File (Generic)	CSS File (Generic Compact)
	Light Blue	dx.light-blue.css dx-analytics.light-blue.css dx-dashboard.light-blue.css	dx.light-blue.compact.css dx-analytics.light-blue.compact.css dx-dashboard.light-blue.compact.css
	Dark Blue	dx.dark-blue.css dx-analytics.dark-blue.css dx-dashboard.dark-blue.css	dx.dark-blue.compact.css dx-analytics.dark-blue.compact.css dx-dashboard.dark-blue.compact.css

Apply a Default Theme

To apply one of the predefined themes, use the corresponding CSS files when you bundle resources. The code snippet below shows how to apply the Carmine theme:

{
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
        "node_modules/devextreme/dist/css/dx.common.css",
        "node_modules/devextreme/dist/css/dx.carmine.css",
        "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
        "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.carmine.css",
        "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
        "node_modules/devexpress-dashboard/dist/css/dx-dashboard.carmine.min.css"
    ],
    "minify": { "enabled": false, "adjustRelativePaths": false }
},

Customize Themes

Use the DevExpress Dashboard CLI to create a custom Dashboard theme or apply a custom DevExtreme theme created with the ThemeBuilder.

The DevExpress Dashboard CLI is a command line tool based on Node.js. It is used with the DevExtreme ThemeBuilder to create a custom theme for the Web Dashboard.

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 export the metadata as dx.generic.light-yellow.json.

   Tip

   Refer to the ThemeBuilder article for more information about the DevExtreme ThemeBuilder tool.

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:

   {
       "items": [
           {
               "key": "@base-accent",
               "value": "#fdb400"
           }
       ],   
       "dashboardItems": [  
           { 
               "key": "@dashboard-item-selected-bg", 
               "value": "rgba(#fdb400, 0.2)" 
           },
           { 
               "key": "@dashboard-item-hover-bg", 
               "value": "rgba(#fdb400, 0.1)" 
           } 
       ],
       "baseTheme": "generic.light",
       "outputColorScheme": "light-yellow",
       "makeSwatch": false,
       "version": "19.1.5"
   }
   

   Refer to the Color Constants section to see a list of available color constants you can use to customize the Web Dashboard’s colors.

6. In the created folder (step 4), execute the command that installs the devexpress-dashboard-cli package and builds the CSS files for your custom theme:

   npx devexpress-dashboard-cli build-theme --input-file dx.generic.light-yellow.json
   

   This generates the following CSS files you need to use to apply a custom theme:

   • dx.light-yellow.css
   • dx-analytics.light-yellow.css
   • dx-dashboard.light-yellow.css
   • dx.light-yellow.min.css
   • dx-analytics.light-yellow.min.css
   • dx-dashboard.light-yellow.min.css

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.

Apply the Custom Theme

A custom theme’s icons should be in the same folder as the theme’s CSS files. For npm, the icons folder is node_modules/devextreme/dist/css. In other cases, the folder is in the same directory as the predefined themes. Copy the icons folder to the directory that contains your theme.

To apply the created custom theme, register the generated CSS files instead of the default styles. You need to disable automatic script and style registration mechanism and register all third-party libraries manually.

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

2. Add the generated CSS files instead of corresponding existing CSS files in the bundleconfig.json file:

   {
       "outputFileName": "wwwroot/css/site.min.css",
       "inputFiles": [
           "node_modules/devextreme/dist/css/dx.common.css",
           "Content/custom-themes/dx.light-yellow.css",
           "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
           "Content/custom-themes/dx-analytics.light-yellow.css",
           "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
           "Content/custom-themes/dx-dashboard.light-yellow.css"
       ],
       "minify": { "enabled": false, "adjustRelativePaths": false }
   }
   

   You can also attach minified CSS files (for example, dx.light-yellow.min.css).

3. Modify the AddDevExpressControls method call in the Startup.cs file:

   services.AddDevExpressControls(settings => settings.Resources = ResourcesType.None);
   

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