Customize the Document Viewer Color Scheme (ASP.NET MVC)
- 4 minutes to read
Choose a Predefined Color Scheme
The Web Document Viewer uses predefined color schemes to display controls.
Each color scheme consists of nine colors. The following table illustrates the available palettes:
Light | Dark | Carmine | Dark Moon | Soft Blue | Dark Violet | Green Mist | Contrast | |
---|---|---|---|---|---|---|---|---|
To change the Document Viewer color scheme, specify it in the GetStyleSheets method. The following code applies the Dark color scheme to the Reporting components:
@Html.DevExpress().GetStyleSheets(
ASPxWebClientUIControl.ColorSchemeDark,
new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
)
Create a Custom Color Scheme (Use a Demo Application)
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}.customization.zip, where {color_scheme} is the applied color scheme’s name (for instance, light.customization.zip).
The archive includes the following files:
reporting.{color_scheme}.custom.css (in this example, reporting.light.custom.css)
Contains changed styles that define the Document Viewer’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 Document Viewer.
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, you can apply the created color scheme to your Document Viewer control:
Open an ASP.NET MVC application that contains the Document Viewer.
Apply the base color scheme to this control in the _Layout.cshtml file:
@Html.DevExpress().GetStyleSheets( ASPxWebClientUIControl.ColorSchemeLight, new StyleSheet { ExtensionSuite = ExtensionSuite.Report } )
Open the page that contains the Document Viewer and link the reporting and DevExtreme CSS files as shown below:
<link rel="stylesheet" href="devextreme.light.custom.css" type="text/css" /> <link rel="stylesheet" href="reporting.light.custom.css" type="text/css" /> @Html.DevExpress().WebDocumentViewer(settings => { settings.Name = "WebDocumentViewer1"; }).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
Run the application to see the result.
Create a Custom Color Scheme Manually
You can customize the Document Viewer CSS classes to create a custom color scheme.
1. Customize the DevExtreme CSS Classes
Change the CSS classes for the Web Document Viewer’s internal DevExtreme UI widgets.
Use the DevExtreme Theme Builder to change the colors and save the customization results (in this example, 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.
2. Customize the Document Viewer CSS Classes
The following tables list the classes that define the Document Viewer’s common appearance grouped by categories. These classes correspond to colors in the base palettes.
Color | Background | Borders | |
---|---|---|---|
1 | .dxd-back-primary2 | ||
2 | .dxd-back-primary .dxd-back-highlighted:hover:not(.dxd-state-no-hover) | ||
3 | .dxd-back-secondary | .dxd-border-primary | |
4 | .dxd-back-highlighted.dxd-state-normal:hover:not(.dxd-state-no-hover) .dxd-back-highlighted.dxd-state-selected .dxd-back-highlighted.dxd-state-selected:hover | .dxd-border-secondary | |
5 | .dxd-back-highlighted.dxd-state-active | ||
6 | .dxd-back-contrast .dxd-back-highlighted.dxd-state-active:hover:not(.dxd-state-no-hover) | ||
7 | .dxd-back-contrast .dxd-back-highlighted:hover .dxd-back-contrast .dxd-back-highlighted.dxd-state-active | ||
9 | .dxd-back-accented | .dxd-border-accented |
Color | Icons | Text | |
---|---|---|---|
1 | .dxd-state-active .dxd-icon-fill .dxd-back-contrast .dxd-state-active .dxd-icon-fill | .dxd-state-active .dxd-text-primary | |
5 | .dxd-back-contrast .dxd-icon-fill | ||
6 | .dxd-icon-fill | ||
7 | .dxd-text-info | ||
8 | .dxd-text-primary | ||
9 | .dxd-text-accented |
Important
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 (in this example, in the viewer.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 Document Viewer elements. Use a browser’s Developer Tools, locate the corresponding UI element in the page markup…
… and declare the assigned CSS class in your CSS file as follows:
// ...
.dx-designer-viewport .dxd-side-panel-tabs-back-color {
background-color: #333399;
}
3. Apply CSS files to Document Viewer
Open the web page that contains the Document Viewer control and link the DevExtreme (generic.light.custom.css) and Document Viewer (viewer.light.custom.css) CSS files as shown below:
<link rel="stylesheet" href="generic.light.custom.css" type="text/css" />
<link rel="stylesheet" href="viewer.light.custom.css" type="text/css" />
@Html.DevExpress().WebDocumentViewer(settings => {
settings.Name = "WebDocumentViewer1";
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
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.