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 set of variables which customizes the appearance of the theme and is useful when creating multiple, persistent theme variations. Each theme may contain multiple swatches.

Each swatch is placed in a separate JSON config file in packages/<THEME_NAME>/lib/swatches folder and is defined by the kendo-swatch json schema part of our kendo-theme-tasks package.

Using Swatches

Setting up the repository

1. Clone the kendo-themes GitHub repository.
2. Install the node-gyp package.
3. Install the dependencies for all themes with npm install && npm run bootstrap.

Compiling existing swatches

1. From the root of the repository run npm run sass:swatches

2. Include one of the compiled CSS swatch files(packages/<THEME_NAME>/dist/SWATCH_NAME.css) in your project.

Creating new swatches

1. Create a new <THEME_NAME>-<SWATCH_NAME>.json file in the packages/<THEME_NAME>/lib/swatches folder.
2. Follow the already existing (<THEME_NAME>-main.json schema for customizing the variables- e.g default-main.json swatch
3. Run npm run sass:swatches task from the root of the repository.
4. Include one of the compiled CSS swatch files(packages/<THEME_NAME>/dist/SWATCH_NAME.css) in your project.