Styling Overview

Kendo UI for Angular provides themes that you can use to style your application.

Currently, the suite ships the following themes:

Theme nameTheme package NPM module
Kendo UI Default theme@progress/kendo-theme-default
Kendo UI Bootstrap theme@progress/kendo-theme-bootstrap
Kendo UI Material theme@progress/kendo-theme-material
The Package is part of Kendo UI for Angular, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Installation

  1. To start using a theme, install its package through NPM. For example, to install the Default theme, run the following command:

    npm install --save @progress/kendo-theme-default

  2. After the theme package is installed, include it in your project.

Including Themes in Your Project

Each theme package provides two ways for including the theme in your project:

Using Precompiled CSS

Each Kendo UI theme includes a precompiled dist/all.css CSS file that contains the styles for all Kendo UI components. To use dist/all.css, reference it in the angular.json file of the application.

As of the Angular 6 release, the .angular-cli.json file is renamed to angular.json.

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

While using the precompiled CSS file is faster than compiling the theme from the source code, the approach has the following drawbacks:

  • It includes CSS for components that may not be used in the application.
  • It does not allow theme customization through SCSS variables (which is possible when you build a theme from the source code) because the theme is already compiled.

Compiling the theme from SCSS source files

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";

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

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

For more information on how to compile and customize the themes, refer to the Customizing Themes section.

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.