Components / Styling & Themes

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 following command:

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

  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.

In this article