Styling Overview
Kendo UI for Angular provides themes that you can use to style your application.
Currently, the suite ships the following themes:
- Kendo UI Default theme—The theme package is available through the
@progress/kendo-theme-defaultNPM module. - Kendo UI Bootstrap theme—The theme package is available through the
@progress/kendo-theme-bootstrapNPM module. - Kendo UI Material theme—The theme package is available through the
@progress/kendo-theme-materialNPM module.
Each package provides options for including the desired theme in your project by using either of the following approaches:
- Using a precompiled CSS file—This approach does not require a build step and is therefore the faster of the two, or
- Compiling the theme from SCSS source files—This approach reduces the CSS output and allows you to customize the theme.
Installation
- 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-defaultcommand. - 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.jsonfile is renamed toangular.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.
