theme
Description
Optional. A theme to be applied to Kanban
Usage
theme?: {
name: string, // "material" (default) | "willow" | "willow-dark"
fonts: boolean
};
important
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"/>
Parameters
To configure the theme, you can use the following parameters.
theme
- (optional) an object with theme settings. Here you can specify the following parameters:name
- (required) a theme name to be applied to Kanbanfonts
- (optional) enables/disables fonts loading from the CDN (wxi font)
tip
You can also apply the Willow and Willow-Dark themes as well. To change the current theme dynamically, you can use the setConfig() method.
Default config
By default, Kanban uses the Material theme.
theme: {
name: "material",
fonts: true
}
Example
// create Kanban
const board = new kanban.Kanban("#root", {
columns,
cards,
theme: {
name: "willow-dark", // the "willow-dark" theme will be set initially
fonts: false
}
// other parameters
});
Change log: The property was added in v1.4
Related articles: Stylization
Related sample: