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/7.2.1/default/default-ocean-blue.css" />

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

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

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

The following table contains a list of the available SASS Theme Swatches:

Sass Theme	Sass Theme CDN
Default - Main	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-main.css
Default - Main Dark	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-main-dark.css
Default - Blue	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-blue.css
Default - Green	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-green.css
Default - Ocean Blue	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-ocean-blue.css
Default - Ocean Blue Accessibility	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-ocean-blue-a11y.css
Default - Orange	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-orange.css
Default - Purple	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-purple.css
Default - Turquoise	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-turquoise.css
Default - Urban	https://kendo.cdn.telerik.com/themes/7.2.1/default/default-urban.css
Classic - Main	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-main.css
Classic - Main Dark	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-main-dark.css
Classic - Opal Dark	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-opal-dark.css
Classic - Opal	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-opal.css
Classic - Silver	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-silver.css
Classic - Silver Dark	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-silver-dark.css
Classic - Metro	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-metro.css
Classic - Metro Dark	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-metro-dark.css
Classic - Moonlight	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-moonlight.css
Classic - Lavender Dark	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-lavender-dark.css
Classic - Lavender Light	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-lavender.css
Classic - Green	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-green.css
Classic - Green Dark	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-green-dark.css
Classic - Uniform	https://kendo.cdn.telerik.com/themes/7.2.1/classic/classic-uniform.css
Bootstrap - Main	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-main.css
Bootstrap - Main Dark	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-main-dark.css
Bootstrap - Bootstrap 3	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-3.css
Bootstrap - Bootstrap 3 Dark	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-3-dark.css
Bootstrap - Bootstrap 4	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-4.css
Bootstrap - Bootstrap 4 Dark	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-4-dark.css
Bootstrap - Nordic	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-nordic.css
Bootstrap - Turquoise	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-turquoise.css
Bootstrap - Turquoise Dark	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-turquoise-dark.css
Bootstrap - Urban	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-urban.css
Bootstrap - Vintage	https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-vintage.css
Material - Main	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-main.css
Material - Main Dark	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-dark.css
Material - Nova	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-nova.css
Material - Arctic	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-arctic.css
Material - Aqua Dark	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-aqua-dark.css
Material - Burnt Teal	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-burnt-teal.css
Material - Eggplant	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-eggplant.css
Material - Lime	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-lime.css
Material - Lime Dark	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-lime-dark.css
Material - Pacific	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-pacific.css
Material - Pacific Dark	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-pacific-dark.css
Material - Sky	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-sky.css
Material - Sky Dark	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-sky-dark.css
Material - Smoke	https://kendo.cdn.telerik.com/themes/7.2.1/material/material-smoke.css
Fluent - Main	https://kendo.cdn.telerik.com/themes/7.2.1/fluent/fluent-main.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.