Customizing Themes

Each Kendo UI theme package includes the source files of the respective theme and, thus, provides options for you to modify and rebuild the theme as part of your build process.

For example, you can change the theme colors, remove the CSS of unused components, or use specific theme colors to style your application. The theme source files are located in the scss folder of the theme package.

For the full list of variables that can be modified in a theme, refer to the article on each theme customization:

To build a custom theme by using the theme variables, apply either of the following approaches:

To preview all components with a specific theme applied and for utilizing versatile color swatches, use the ThemeBuilder application which provides an interface for theme customization.

Using the Build Process of the Application

If you use Angular 8, you have to upgrade to the latest version of the themes. For more information, refer to the article on keeping up to date.

Angular CLI supports the compilation of SCSS files. To compile the theme in your application, import the style files for the components in use.

// Import only the PanelBar and Grid styles.
@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

With this setup, you can customize theme variables directly in your application. For example, you can change the default accent color from orange to pink with the following lines:

$accent: #ff69b4;

@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

It is also possible to include all available component styles. However, this will significantly increase the build time and bundle the size of the application.

// styles.scss
@import "~@progress/kendo-theme-default/dist/all.scss";

Removing Themes from angular.json

The ng add schematics for the Kendo UI packages adds the precompiled CSS file to angular.json. When you use the SCSS files, you have to remove these references.

Supporting Legacy Browsers

The default Angular CLI configuration produces CSS that is not compatible with Internet Explorer v11. To provide support for Internet Explorer 9 to 11, remove not from the last not dead line of src/browserslist. For more information, refer to the article on changing the target browsers for Autoprefixer.

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11

Notes on Performance

While including the Kendo UI themes in the styles of your application is convenient, it adds up to 30 seconds to the build time because the themes are compiled on each build. To reduce the duration of the build process in Angular CLI, install the fibers package by running the npm install --save-dev fibers command.

Using the Build Process of the Themes

While each Kendo UI theme has a dedicated NPM package (for example, @progress/kendo-theme-default), the source code for all themes is located in the kendo-themes GitHub repository which contains a build task that compiles the theme sources to CSS. To customize a theme, modify the source code of the theme and use the build task to produce a CSS file for your application. This approach avoids the need for setting up a build configuration when you compile SCSS but may be harder to maintain as the process has to be repeated each time a theme is updated.

To improve the development process, the individual GitHub repositories of each theme were merged into a single kendo-themes repository. The individual theme repositories are now archived.

Customizing Themes with Swatches

A swatch is a set of variables which customizes the appearance of the theme.

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

To create a swatch:

  1. Clone the kendo-themes GitHub repository.
  2. Install the node-gyp package.
  3. Install the dependencies for all themes with npm install && npx lerna bootstrap.
  4. Switch the working directory to packages/<THEME_NAME>.
  5. Create a SWATCH_NAME.scss swatch file in the scss/swatches folder.
  6. To build the swatches for the theme by running npm run sass:swatches or npm run dart:swatches.
  7. Include the compiled CSS swatch file in your project. It could be found under dist/SWATCH_NAME.css.

For example, in the Material theme create blue-pink-dark swatch with the following lines:

// Variables.
$primary-palette-name: blue;
$secondary-palette-name: pink;
$theme-type: dark;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

For the Default and Bootstrap themes, the swatch should look like:

// Variables.
$primary: blue;
$secondary: pink;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

Customizing the Source Code

To create a custom theme by modifying the themes source code:

  1. Clone the kendo-themes GitHub repository.
  2. Install the dependencies for all themes with npm install && npx lerna bootstrap.
  3. Customize the theme variables in the packages/<THEME_NAME>/scss/_variables.scss files.
  4. Build the themes with the npm run sass or npm run dart command to create the customized version of the themes in the packages/THEME_NAME/dist/all.css file.
  5. After the build completes, use the compiled CSS.

In this article