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

What is a 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 theme names.

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

What is a 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.

You can explore 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.

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.

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.

Default

A theme that is based on the Telerik and Kendo UI Design System and suits most applications.

Material

A theme that follows the Material Design guidelines.

Bootstrap

А theme that matches the metrics and styling of Bootstrap v5.

Fluent

A theme that implements the Microsoft Fluent UI look and feel.

Classic

A theme based on the predecessor of the current Telerik and Kendo UI Design System.

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

To compile a Kendo UI theme from SCSS source files:

Import the style files for the components you use, or import styles for all components.

Reference the SCSS file where the theme is imported in your angular.json file:

"build": {
  "options": {
    "styles": [ "src/styles.scss" ]
  }
}

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, manually remove the precompiled CSS reference.

Each Kendo UI theme package includes SCSS source files organized in dedicated folders for each component. Using SCSS files provides the flexibility to customize the theme according to your specific requirements.

Using Precompiled CSS

Each Kendo UI theme package includes precompiled CSS files that you can use directly in your Angular application. Read more about the Precompiled CSS files.

The theme packages contain the following precompiled files in the dist folder:

all.css—Contains styles for all Kendo UI components.
Swatch files—Individual swatch variations (e.g., default-ocean-blue.scss, bootstrap-nordic.scss).

To use a precompiled theme or swatch, reference the corresponding file in the angular.json file of your Angular application.

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

Reducing Bundle Size with SCSS Imports

By default, the scss/all.scss file includes styles for all available components in the theme, which may increase your bundle size unnecessarily.

To reduce the CSS bundle size, you can selectively import only the styles for the components you use:

Import the theme index file (index.scss) instead of the complete theme.
Include only the specific component styles your application requires.

scss

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

// Then include only the components you use
@include kendo-button--styles();
@include kendo-panelbar--styles();

This approach ensures that your final CSS bundle contains only the styles for the Kendo UI components that are actually used in your application.

Compatibility and Maintenance

The Kendo Themes are decoupled from the Kendo UI for Angular components, which requires careful version management to ensure proper styling and compatibility.

When using a CSS theme as a local npm package:

Keep the installed kendo-themes packages updated to the latest version
This ensures properly styled components and avoids version incompatibility issues

When loading a CSS theme from a CDN:

Verify that the theme version is compatible with your Kendo UI for Angular version
Refer to our Changelogs article for theme compatibility information for each release