DHTMLX Suite library provides 4 predefined themes:
- default theme ("light")
- dark theme ("dark")
- light high contrast theme ("contrast-light")
- dark high contrast theme ("contrast-dark")
The Suite themes are developed in accordance with international standards. The high contrast themes will be helpful for users who have vision impairment. For more detail, read the Accessibility support article.
You can try all themes in the example below:
If the base Suite themes don't fit your project, you can configure your own color theme. For more information, read the Custom theme article.
To set the necessary theme, be it a Suite theme or a custom one, use one of the ways described below:
- change the 'data-dhx-theme' attribute for the chosen container:
<!-- component container -->
<div data-dhx-theme="dark" style="height: 100%" id="chart"></div>
- change the 'data-dhx-theme' attribute for the root element:
// your code here
- or apply the dhx.setTheme() method