Skip to main content

Themes overview

Suite themes​

DHTMLX Suite library provides 4 predefined themes:

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:

Custom themes​

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.

Setting themes​

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:
index.html
<!-- component container -->
<div data-dhx-theme="dark" style="height: 100%" id="chart"></div>
  • change the 'data-dhx-theme' attribute for the root element:
index.js
// your code here

document.documentElement.setAttribute("data-dhx-theme", "dark");