Skip to main content

theme

Description​

Optional. Specifies the theme applied to the Toolbar.

Usage​

theme?: string; // "material" | "willow" | "willow-dark"
important

In addition to setting the theme property, you can apply the desired theme by adding the corresponding css classes to the widget containers:

  • Material theme
    <!-- Kanban toolbar -->
    <div id="toolbar" class="wx-material-theme"></div>
    <!-- Kanban container -->
    <div id="root" class="wx-material-theme"></div>
  • Willow theme
    <!-- Kanban toolbar -->
    <div id="toolbar" class="wx-willow-theme"></div>
    <!-- Kanban container -->
    <div id="root" class="wx-willow-theme"></div>
  • Willow-Dark theme
    <!-- Kanban toolbar -->
    <div id="toolbar" class="wx-willow-dark-theme"></div>
    <!-- Kanban container -->
    <div id="root" class="wx-willow-dark-theme"></div>

Alternatively, simply include the desired theme stylesheet from the skins folder:

<link type="stylesheet" href="path/to/kanban/skins/willow-dark.css"/>

Default config​

The Toolbar defaults to the Material theme. You can also switch to the Willow or Willow-Dark themes.

tip

To update the theme on the fly, use the setConfig() method.

Example​

// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    theme: "willow-dark" // sets the initial theme to "willow-dark"
    // other parameters
});
// create Toolbar
new Toolbar("#toolbar", {
    api: board.api,
    theme: "willow-dark", // sets the initial theme to "willow-dark"
});

Change log: This property was introduced in v1.4

Related articles: Stylization

Related sample: