Styling Overview

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

Currently, the suite ships the following themes:

Each package provides options for including the desired theme in your project by using either of the following approaches:

Installation

  1. To start using a theme, install its package through NPM. For example, to install the Default theme, run the npm install --save @progress/kendo-theme-default command.
  2. After the theme package is installed, reference it in your project.

Including Themes by 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 are not used in the application.
  • It does not provide options for theme customization through SCSS variables (which is possible when you build the theme from the source code) because the theme is already compiled.