Styling Overview

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

Currently, the suite ships the following themes:

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:

• By using a precompiled CSS file - this approach does not require a build step and is therefore faster, or
• By compiling the theme from SCSS source files - this approach reduces the CSS output and allows you to customize the theme.

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.

Copy Code{
  "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.

Copy Code// 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.

Copy Code// 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.

Suggested Links

• Customizing Themes
• Web Font Icons in Kendo UI for Angular
• Getting Started with Kendo UI for Angular
• Kendo UI Components for Angular