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

Appearance Customization

  • 2 min to read

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 specific stylesheets to the page to paint the HTML JavaScript Dashboard control with a specific color scheme. For this, use the following CSS files from the devextreme, @devexpress/analytics-core, and devexpress-dashboard npm packages:

CSS File Description
dx.light.css
dx-analytics.light.css
dx-dashboard.light.css
Enables the Light color scheme.
dx.light.compact.css
dx-analytics.light.compact.css
dx-dashboard.light.compact.css
Enables the compact Light color scheme.
dx.dark.css
dx-analytics.dark.css
dx-dashboard.dark.css
Enables the Dark color scheme.
dx.dark.compact.css
dx-analytics.dark.compact.css
dx-dashboard.dark.compact.css
Enables the compact Dark color scheme.

Note that the HTML JavaScript control requires additional CSS files to attach. You can find a complete list of the required CSS files in the following sections:

The code snippet below shows how to enable the Dark color scheme for the Angular application when you add global styles:

@import url("../node_modules/jquery-ui/themes/base/all.css");
@import url("../node_modules/devextreme/dist/css/dx.common.css");
@import url("../node_modules/devextreme/dist/css/dx.dark.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.dark.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.dark.css");

Compact Theme Specifics

Note that compact themes affect only specific dashboard items that include: