Swatches

A swatch is a set of variables used to modify a Telerik UI theme.

• Swatches can be used for creating multiple and persistent theme variations.
• A theme may contain multiple swatches.
• Each swatch is placed in a separate json configuration file.
• The .css output file can be shared across projects and requires no further processing.

The Telerik UI theme swatches follow the kendo.<THEME_NAME>-<SWATCH_NAME> convention.

The following example showcases several swatches:

 <!-- 
  Theme name - default
  Swatch name - ocean-blue
 -->
 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.2.0/default/default-ocean-blue.css" />

 <!-- 
  Theme name - default
  Swatch name - purple
 -->
 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.2.0/default/default-purple.css" />

 <!-- 
  Theme name - bootstrap
  Swatch name - vintage
 -->
 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.2.0/bootstrap/bootstrap-vintage.css" />

 <!-- 
  Theme name - material
  Swatch name - nova
 -->
 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.2.0/material/material-nova.css" />

Using Built-in Swatches

To use the Telerik Themes infrastructure for building and creating swatches, first set up the Kendo Themes repository:

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

4. Run the sass:swatches task from the root of the repository

   npm run sass:swatches
   

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

Creating New Swatches

1. Create a <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.

3. Run the sass:swatches task from the root of the repository.

   npm run sass:swatches
   

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