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:
- Clone the kendo-themes GitHub repository.
- Install the node-gyp package.
- Install the dependencies for all themes with
npm run setup
. -
Run the
sass:swatches
task from the root of the repositorynpm run sass:swatches
Add one of the compiled CSS swatch files(
packages/<THEME_NAME>/dist/SWATCH_NAME.css
) in your project.
Creating New Swatches
- Create a
<THEME_NAME>-<SWATCH_NAME>.json
file in thepackages/<THEME_NAME>/lib/swatches
folder. - Follow the already existing
(<THEME_NAME>-main.json
schema for customizing the variables. -
Run the
sass:swatches
task from the root of the repository.npm run sass:swatches
Include one of the compiled CSS swatch files(
packages/<THEME_NAME>/dist/SWATCH_NAME.css
) in your project.