Themes Overview

Kendo UI for Angular comes with a set of built-in CSS themes that control the visual appearance of the components. Each theme determines the components' colors, borders, backgrounds, size, layout, position, font size and sometimes the font family.

The Styling & Themes are part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

Theme

A theme is a collection of styles in a CSS file, which determine the appearance of the Kendo UI for Angular components, including fonts, colors, sizes and layouts. For example, Default and Bootstrap are two built-in theme names.

Swatch

A theme swatch is a color variation of a theme. All swatches of a given theme use the same fonts, sizes, and layouts. On the other hand, the text colors, background colors and border colors are different. For example, Default Ocean Blue and Bootstrap Nordic are two built-in swatch names.

When the Kendo UI for Angular documentation talks about a given theme name, for example Default, this implies the Main swatch of this theme. In addition, the word "theme" as a general term can imply any swatch of any theme.

The CSS file of any swatch is self-sufficient and contains all required styles for the Kendo UI for Angular components, except the optional font icon styles. You can switch the theme runtime, but the Angular app should always load only one theme at a time.

Integration with Kendo Components

The CSS themes represent an external dependency to Kendo UI for Angular:

The themes represent a separate product, which is used by multiple Telerik and Kendo UI products. Each Kendo UI for Angular version is compatible with specific theme versions.
The Telerik and Kendo UI Themes documentation is part of the Progress Design System Kit documentation. The content in the Kendo UI for Angular documentation is introductory and specific only to the Kendo UI for Angular components.
The Telerik and Kendo UI Themes have their own product development, roadmap and strategy. You can log public feature requests or bug reports on the Telerik and Kendo UI Web Themes feedback portal.

Built-in Themes

The Themes - Get Started Page lists the available themes for the Kendo UI for Angular components and describes their unique specifics.

Comparing Themes and Swatches

You can explore and compare the built-in theme swatches in the live Kendo UI for Angular demos. Use the Change Theme dropdown above the examples for each component to dynamically change the Kendo UI theme applied to the demos.

To test how the available swatches affect the appearance of the Kendo UI for Angular components, you can also check the ThemeBuilder app. This tool provides the ability to customize the existing themes and swatches.

Including a Theme

To add the desired Kendo theme into your Angular application, you can either:

Use an external CDN link—The simplest way to include a Kendo UI theme.
Install the theme as an NPM package—Allows you to customize the theme.

Installing the NPM Package

For more details about the installation of the theme, refer to the corresponding theme page:

After successfully installing the theme, include it in your project using one of the following methods:

Using the SCSS Source Files
Using Precompiled CSS

Using SCSS Source Files

All Kendo UI for Angular components have a dedicated folder in each Kendo UI themes package, which contains the SCSS files required for the given component. Compiling a theme through SCSS files allows you to further customize the theme to fit your specific requirements.

To compile a Kendo UI theme from SCSS source files:

Import the style files for the components in use or import the styles for all components.
Reference the SCSS file, where the theme is imported, within the angular.json file:

When installing a package using the ng add command, the precompiled CSS file is automatically added to the angular.json file. If you choose to compile SCSS files, you have to manually remove the precompiled CSS reference.
ts
```
"build": {
  "options": {
    "styles": [ "src/styles.scss" ]
  }
}
```

Using Precompiled CSS

Each Kendo UI theme includes a precompiled dist/all.css CSS file that contains the styles for all Kendo UI components. Read more about the Precomplied CSS files.

To load the theme, reference the dist/all.css in the angular.json file of the Angular application.

"build": {
  "options": {
    "styles": [
      {
        "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
      }
    ]
  }
}

The swatches for each theme are distributed with the theme package, and you can find their SCSS files in the dist folder of the package. For example, to use dist/default-ocean-blue.scss, reference it in the angular.json file of the application.

"build": {
  "options": {
    "styles": [
      {
        "input": "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss"
      }
    ]
  }
}

Reducing Bundle Size with SCSS Imports

The scss/all.scss file adds the styles for all components that are available in the theme. To trim down the size of the generated CSS, import the scss/index.scss file, and include the styles for the components that you use in your application.

scss

// Use the theme index
@use "@progress/kendo-theme-default/scss/index.scss" as *;

// Then include only Button and PanelBar styles
@include kendo-button--styles();
@include kendo-panelbar--styles();

Compatibility and Maintenance

The Kendo Themes are decoupled from the Kendo UI for Angular components, which leads to the following usage requirements:

When using a CSS theme as a local npm package, make sure that the installed kendo-themes packages are also updated to the latest version in order to have properly styled components and avoid any version incompatibility.
When loading a CSS theme from a CDN, make sure that the theme version is compatible with the Kendo UI for Angular version. Our Changelogs article provides theme compatibility information for each release of the Kendo UI for Angular packages.