Appearance Customization

The HTML5 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
FinanceWeb_Screenshot FinanceTablet_Screenshot

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.1\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: