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