Appearance Customization
The HTML JavaScript Dashboard control supports the Light and Dark color schemes. If necessary, you can enable a compact theme designed to fit a large number of elements within a web page.
| Light | Dark |
|---|---|
 |
 |
You need to attach a specific stylesheet to the HTML page to paint the JavaScript Dashboard control using a color scheme. You can find the available CSS files using the following path:
C:\Program Files (x86)\DevExpress 18.2\Components\Sources\DevExpress.Dashboard\DevExpress.Dashboard.Web\Scripts\Bundle
| CSS File | Description |
|---|---|
| dx.dashboard-control.bundle.light.css | Enables the Light color scheme. |
| dx.dashboard-control.bundle.light.compact.css | Enables the compact Light color scheme. |
| dx.dashboard-control.bundle.dark.css | Enables the Dark color scheme. |
| dx.dashboard-control.bundle.dark.compact.css | Enables the compact Dark color scheme. |
Attach the corresponding stylesheet to the <head> section before the script files to enable a color scheme:
<head>
<!-- ... -->
<link href="/Scripts/dx.dashboard-control.bundle.light.css" rel="stylesheet" />
<script src="/Scripts/dx.dashboard-control.third-party.min.js"></script>
<script src="/Scripts/dx.dashboard-control.bundle.min.js"></script>
</head>
Compact Theme Specifics
Note that compact themes affect only specific dashboard items that include: