The requested page is not available for the requested platform. You are viewing the content for Default platform.

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
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 19.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: