Skip to main content



Optional. A theme to be applied to Toolbar


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

Besides using the theme property, you can also apply the needed theme via 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>

or just include the needed theme on the page from the skins folder:

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

Default config

By default, Toolbar uses the Material theme. You can set it to the Willow and Willow-Dark themes as well.


To change the current theme dynamically, you can use the setConfig() method.


// create Kanban
const board = new kanban.Kanban("#root", {
theme: "willow-dark" // the "willow-dark" theme will be set initially
// other parameters
// create Toolbar
new Toolbar("#toolbar", {
api: board.api,
theme: "willow-dark", // the "willow-dark" theme will be set initially

Change log: The property was added in v1.4

Related articles: Stylization

Related sample: