Swatches

With the introduction of Kendo UI Theme Tasks (on NPM and on GitHub), you now have the option to create color variants of the themes (swatches).

A swatch is a file that contains variables and as such, a swatch can customize a theme to look completely different. However, for the purpose of the current topics, we consider a swatch to be a file of variables which customizes colors.

For each theme, place the swatch files in the respective ./scss/swatches directory.

To build all swatches, run npm run swatches.

The following example is from the Material theme.

// List all variables you want to customize
// Depending on your actual case you may or may not need !default swtich
$primary-name: blue;
$secondary-name: pink;
$theme-type: light;

// Import the theme file
@import "../all.scss";

Material swatches

Material swatches are a little bit different in regards to how they are generated. The theme relies on two named colors:

• red
• pink
• purple
• deepPurple
• indigo
• blue
• lightBlue
• cyan
• teal
• green
• lightGreen
• lime
• yellow
• amber
• orange
• deepOrange
• brown
• grey
• blueGrey

and an additional light or dark theme type.