Skip to main content

setTheme()

sets the theme by its name

setTheme(theme: string, container?: string | HTMLElement): void;

Parameters:

  • theme: string - required, the name of the theme. It can be:
    • the name of the Suite theme: "light" | "contrast-light" | "dark" | "contrast-dark"
    • the name of a custom theme
    • "light" - by default
  • container: string | HTMLElement - optional, the container to which the theme must be applied. It can be:
    • an HTMLElement
    • a string value with ID of the container or ID of a Layout cell
    • document.documentElement - by default

Examples​

Example 1
const layout = new dhx.Layout("layout", {
    type: "space",
    cols: [
        { id: "cell-1" },
        { id: "cell-2" },
    ]
});

const form_1 = new dhx.Form(null, config);
layout.getCell("cell-1").attach(form_1);

const form_2 = new dhx.Form(null, config);
layout.getCell("cell-2").attach(form_2);

dhx.setTheme("dark", "cell-2"); // apply the "dark" theme to the Layout cell with the "cell-2" ID

//or
dhx.setTheme("dark"); // apply the "dark" theme to the body
Example 2
<div id="container-1"></div>
<div id="container-2"></div>

<script>
    const form_1 = new dhx.Form("container-1", config);
    const form_2 = new dhx.Form("container-2", config);

    dhx.setTheme("dark", "container-2");//apply the "dark" theme to the container with the "container-2" ID
</script>
Example 3
<div id="container-1"></div>
<div id="container-2"></div>

<script>
    const form_1 = new dhx.Form("container-1", config);
    const form_2 = new dhx.Form("container-2", config);
    
    const container = document.getElementById("container-2");
    dhx.setTheme("dark", container); //apply the "dark" theme to the container specified via an HTMLElement
</script>