Skip to main content

Customize the Report Designer Color Scheme (ASP.NET Core)

  • 5 minutes to read

Choose a Predefined Color Scheme

The Web Report Designer uses predefined color schemes to display controls.

Each color scheme consists of nine colors. The following table illustrates the available palettes:




Dark Moon

Soft Blue

Dark Violet

Green Mist


  1. To specify a color scheme, add a link to the schema’s CSS file from the View. The file name is dx-analytics.{color_scheme}.css, where {color_scheme} is the color scheme’s name (light, carmine, contrast, dark, darkmoon, darkviolet, greenmist, softblue).

  2. The schema’s CSS files are stored in the node_modules@devexpress\analytics-core\dist\css folder. Copy the schema file to the wwwroot\css folder and link it in the View page markup.

    The following code illustrates how to apply the Dark Violet color scheme:

    <link rel="stylesheet" href="~/css/viewer.part.bundle.css" />
    <link rel="stylesheet" href="~/css/designer.part.bundle.css" />
    <link rel="stylesheet" href="~/css/dx-analytics.darkviolet.css" />
    <script src="~/js/viewer.part.bundle.js"></script>    
    <script src="~/js/designer.part.bundle.js"></script>    

Create a Custom Color Scheme (Use a Demo Application)

Run Demo: Color Scheme Customization View Example: How to Create a Custom Color Scheme for the Web Report Designer and Document Viewer

To create a custom color scheme in the Color Scheme Customization demo, select a base color scheme from the Color Scheme Customization tab’s drop-down menu.

Use the color picker or specify a color value to change a color. Changes are applied instantly.

After you complete customization, click the Save Changes button to download a ZIP archive.

The file name is {color_scheme}, where {color_scheme} is the applied color scheme’s name (for instance,

The archive includes the following files:

  • reporting.{color_scheme}.custom.css (in this example, reporting.light.custom.css)

    Contains changed styles that define the Report Designer’s common appearance.

  • devextreme.{color_scheme}.custom.css (in this example, devextreme.light.custom.css)

    Contains changed styles for DevExtreme UI widgets used in the Report Designer.

  • dx.themebuilder.metadata.json

    Contains metadata that you can use in the Theme Builder to customize DevExtreme widgets.

Click the View Changes button to invoke the Customization Results dialog. This dialog’s tabs list the same changed CSS classes and Theme Builder metadata.

The Reset Changes button resets all the changes.

Once you saved the resulting files, apply the created color scheme to your Report Designer control:

  1. Open an ASP.NET Core application that contains the Report Designer.

  2. Select and apply the base predefined color scheme, as described in the previous section.

  3. Copy the reporting and DevExtreme CSS files to the wwwroot/css folder and link them in the View.

The resulting View HTML code is shown below:

<link rel="stylesheet" href="~/css/viewer.part.bundle.css" />
<link rel="stylesheet" href="~/css/designer.part.bundle.css" />

@*The following link to the dx-analytics.light.css file is unnecessary because the default light theme is referenced in the viewer.part.bundle.css.
    However, a link to the dx-analytics.{theme name}.css file is required for other themes.*@
<link rel="stylesheet" href="~/css/dx-analytics.light.css" />

<link href="~/css/devextreme.light.custom.css" rel="stylesheet" />
<link href="~/css/reporting.light.custom.css" rel="stylesheet" />

<script src="~/js/viewer.part.bundle.js"></script>
<script src="~/js/designer.part.bundle.js"></script>


Run the application to see the result.

Create a Custom Color Scheme Manually

You can customize the Report Designer CSS classes to create a custom color scheme.

Customize the DevExtreme CSS Classes

Change the CSS classes for the Report Designer’s internal DevExtreme UI widgets.

Use the DevExtreme Theme Builder to change the colors and save the result (for instance, the generic.light.custom.css file for the light color scheme).

Refer to the documentation topic for information on how to use the Theme Builder.

Customize the Report Designer CSS Classes

The following tables groups the classes that define the Report Designer’s common appearance by categories. These classes correspond to colors in the base palettes.






.dxrd-navigation-panel-wrapper .dx-tab




.dxrd-navigation-panel-wrapper .dx-tab:hover











.dxrd-navigation-panel-wrapper .dx-tab.dx-tab-selected

.dxrd-navigation-panel-wrapper .dx-tab.dx-tab-selected:hover

.dxrd-navigation-panel-wrapper .dx-tab





.dxd-back-contrast .dxd-back-highlighted:hover

.dxd-back-contrast .dxd-back-highlighted.dxd-state-active








.dxd-state-active .dxd-icon-fill

.dxd-back-contrast .dxd-state-active .dxd-icon-fill

.dxd-state-active .dxd-text-primary

.dxrd-navigation-panel-wrapper .dx-tab.dx-tab-selected

.dxrd-navigation-panel-wrapper .dx-tab.dx-tab-selected .dx-icon


.dxd-back-contrast .dxd-icon-fill




.dxrd-navigation-panel-wrapper .dx-icon




.dxrd-navigation-panel-wrapper .dx-tab




To apply a Reporting CSS style rather than a DevExtreme style within a color swatch, add the “.dx-designer-viewport “ selector to the style name.

The following code snippet demonstrates how to specify colors for each category (for instance, in the designer.light.custom.css file):

.dx-designer-viewport .dxd-back-primary {
    background-color: #d9d9f2;

.dx-designer-viewport .dxd-border-primary {
    border-color: #b3b3e6;

.dx-designer-viewport .dxd-icon-fill {
    fill: #4040bf;

.dx-designer-viewport .dxd-text-info {
    color: #333399;

// ...

You can also specify styles for individual Report Designer elements:

  1. Locate a UI element in the browser’s Developer Tools.

  2. Declare the assigned CSS class in your CSS file as follows:

    // ...
    .dx-designer-viewport .dxd-side-panel-tabs-back-color { 
        background-color: #333399; 

Apply CSS files to Report Designer

Open the web page that renders the Report Designer control and link the DevExtreme (generic.light.custom.css) and Report Designer (designer.light.custom.css) CSS files as shown below:

<!-- Link other required resources -->
<!-- ... -->

<link href="/node_modules/ace-builds/css/ace.css" rel="stylesheet" />
<link href="/node_modules/ace-builds/css/theme/dreamweaver.css" rel="stylesheet" />
<link href="/node_modules/ace-builds/css/theme/ambiance.css" rel="stylesheet" />
<link href="~/node_modules/devextreme/dist/css/dx.light.css" rel="stylesheet" />
<link href="~/node_modules/@@devexpress/analytics-core/dist/css/dx-analytics.light.css" rel="stylesheet" />
<link href="~/node_modules/@@devexpress/analytics-core/dist/css/dx-analytics.common.css" rel="stylesheet" />
<link href="~/node_modules/@@devexpress/analytics-core/dist/css/dx-querybuilder.css" rel="stylesheet" />
<link href="~/node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css" rel="stylesheet" />
<link href="~/node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css" rel="stylesheet" />
<link href="~/css/generic.light.custom.css" rel="stylesheet" />
<link href="~/css/designer.light.custom.css" rel="stylesheet" />

Upgrade from Previous Versions

You can use dx-swatch CSS selectors to apply predefined styles to your application’s elements. CSS styles with these selectors are applied to the Report Designer/DocumentViewer widgets. Custom color schemes defined in Reporting have no effect.

To resolve the issue, add the .dx-designer-viewport selector prefix to the names of the reporting CSS styles to raise their priority over DevExtreme styles in the color swatch, as in the following sample class definition:

.dx-designer-viewport .dxd-back-primary {
    background-color: #d9d9f2;
.dx-designer-viewport .dxd-back-primary2 {
    background-color: #ececf9;

You can also use our online demo to generate the correct style definitions.