Skip to main content

theme

Description​

Optional. Defines a theme to apply to the Kanban board

Usage​

theme?: {
    name: string, // "material" (default) | "willow" | "willow-dark"
    fonts?: boolean
};
important

Besides setting the theme property, it's also possible to apply a theme by adding the appropriate css classes directly 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, you can include the desired theme by linking its stylesheet from the skins folder:

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

Parameters​

Here are the parameters you can use to configure the theme:

  • theme - (optional) an object holding theme settings. It supports:
    • name - (required) the name of the theme to apply to the Kanban
    • fonts - (optional) controls whether fonts are loaded from the CDN (wxi font)
tip

The Willow and Willow-Dark themes are also available. To switch themes dynamically, the setTheme() method can be used.

Default config​

The Kanban board defaults to the Material theme.

theme: {
    name: "material",
    fonts: true
}

Example​

// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    theme: {
        name: "willow-dark", // sets the "willow-dark" theme initially
        fonts: false
    }
    // other parameters
});

Change log: This property was introduced in v1.4

Related articles: Stylization

Related sample: