New to Telerik UI for ASP.NET Core? Download free 30-day trial

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

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

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

 <!-- 
  Theme name - material
  Swatch name - nova
 -->
 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.7.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.

In this article