Customization

Swatches

The swatches are predefined color variants of a specific main theme. Each swatch is a set of variables that modify the default appearance of the main theme, for example, of the Bootstrap theme. Swatches are useful when creating multiple, persistent theme variations. Each theme may contain multiple swatches.

The source for each swatch is placed in a separate JSON config file that is located in the packages/<THEME_NAME>/lib/swatches folder. The swatches are defined by the kendo-swatch json schema that is part of the kendo-theme-tasks package.

Using Swatches

The swatches for each theme are distributed with the theme package, and you can find their SCSS and CSS files in the dist folder of the package, for example:

node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.css
node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss

Using the External (CDN) Link

Similarly to the main themes, you can load a swatch by using a CDN link. To reference the swatch stylesheet that is hosted on the Telerik and Kendo servers, add the CDN link in the head element of your page.

<!-- Default theme with Ocean Blue swatch -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/default/default-ocean-blue.css" />

<!-- Booststrap theme with Main Dark swatch -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/bootstrap/bootstrap-main-dark.css" />

Using the Build Process of the Themes

If you are using the build process of the themes to compile your theme:

1. From the root of the repository, run npm run sass:swatches . If you are using dart-sass, run npm run dart:swatches.
2. Include one of the compiled CSS swatch files (packages/<THEME_NAME>/dist/SWATCH_NAME.css) in your project.

Creating New Swatches

To create a new swatch based on your custom preferences, clone the kendo-themes repository and then add a custom JSON file with your swatch.

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 run setup.

Adding a New Swatch

1. Create a new <THEME_NAME>-<NEW_SWATCH_NAME>.json file in the packages/<THEME_NAME>/lib/swatches folder.
2. Customize the variables by following the schema in the existing <THEME_NAME>-main.json file. For example, to create a swatch for the Telerik and Kendo UI default theme, follow the schema in the default-main.json swatch.
3. From the root of the repository, run npm run sass:swatches . If you are using dart-sass, run npm run dart:swatches.
4. Include one of the compiled CSS swatch files (packages/<THEME_NAME>/dist/NEW_SWATCH_NAME.css) in your project.