# 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.

<CtaPanelOverview></CtaPanelOverview>

## 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, *Meridian* and *Bootstrap* are two theme names.

The [Themes - Get Started Page](https://www.telerik.com/design-system/docs/themes/get-started/introduction/#available-themes) 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](https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/swatches/) 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](https://www.telerik.com/kendo-angular-ui/components/styling/icons#using-font-icons). You can [switch the theme runtime](https://www.telerik.com/kendo-angular-ui/components/knowledge-base/change-theme-dynamically), 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](https://www.telerik.com/kendo-angular-ui/components/grid). 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](https://themebuilderapp.telerik.com/). 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](https://www.telerik.com/kendo-angular-ui/components/styling#compatibility-and-maintenance).

* The [Telerik and Kendo UI Themes](https://www.telerik.com/design-system/docs/themes/get-started/introduction/) documentation is part of the [Progress Design System Kit documentation](https://www.telerik.com/design-system/docs/). 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](https://feedback.telerik.com/themes).

## Including a Theme

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

* [Use an external CDN link](https://www.telerik.com/design-system/docs/themes/get-started/installation/#using-external-cdn-link)—The simplest way to include a Kendo UI theme.
* [Install the theme as an NPM package](https://www.telerik.com/kendo-angular-ui/components/styling#installing-the-npm-package)—Allows you to customize the theme.

If you use Tailwind CSS, load a Kendo UI theme to style the components and use Tailwind utilities for your application layout. For Tailwind CSS v4 token mapping in new or existing projects, see [Integrating Kendo UI Themes with Tailwind CSS](https://www.telerik.com/design-system/docs/themes/integrations/tailwind/).

### Installing the NPM Package

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

<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="https://www.telerik.com/design-system/docs/themes/kendo-themes/meridian/">
      <ComponentTitle>Meridian</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>A modern theme with refined aesthetics and professional styling.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="https://www.telerik.com/design-system/docs/themes/kendo-themes/material/">
      <ComponentTitle>Material</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>A theme that follows the Material Design guidelines.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="https://www.telerik.com/design-system/docs/themes/kendo-themes/bootstrap/">
      <ComponentTitle>Bootstrap</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>А theme that matches the metrics and styling of Bootstrap v5.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="https://www.telerik.com/design-system/docs/themes/kendo-themes/fluent/">
      <ComponentTitle>Fluent</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>A theme that implements the Microsoft Fluent UI look and feel.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="https://www.telerik.com/design-system/docs/themes/kendo-themes/default/">
      <ComponentTitle>Default</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>A theme that is based on the Telerik and Kendo UI Design System and suits most applications.</ComponentDescription>
    </Component>
  </Column>
</Row>

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

* [Using the SCSS Source Files](https://www.telerik.com/kendo-angular-ui/components/styling#using-scss-source-files)
* [Using Precompiled CSS](https://www.telerik.com/kendo-angular-ui/components/styling#using-precompiled-css)

### Using SCSS Source Files

To compile a Kendo UI theme from SCSS source files:

1. [Import the style files](https://www.telerik.com/design-system/docs/themes/get-started/installation/#using-the-build-process-of-the-application) for the components you use, or import styles for all components.

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

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

> When installing a package using the `ng add` command, the [precompiled CSS file](https://www.telerik.com/kendo-angular-ui/components/styling#using-precompiled-css) 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](https://github.com/telerik/kendo-themes/tree/develop/packages/default/scss) includes SCSS source files organized in dedicated folders for each component. Using SCSS files provides the flexibility to [customize the theme](https://www.telerik.com/kendo-angular-ui/components/styling/custom-themes) 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](https://www.telerik.com/design-system/docs/themes/get-started/installation/#using-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 Theme
"build": {
  "options": {
    "styles": [
      {
        "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
      }
    ]
  }
}
```

```ts Swatch
"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:

1. Import the theme index file (`index.scss`) instead of the complete theme.
2. 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](https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui) article for theme compatibility information for each release

## Suggested Links

* [Progress Design System Kit documentation](https://www.telerik.com/design-system/docs/)
* [Customizing Themes](https://www.telerik.com/kendo-angular-ui/components/styling/custom-themes)
* [Web Font Icons in Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/styling/icons)
* [Explore the Telerik and Kendo UI Kits for Figma](https://www.telerik.com/design-system/docs/resources/figma-ui-kits/)
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/getting-started)
* [Kendo UI Components for Angular](https://www.telerik.com/kendo-angular-ui/components/)