Styling Overview
Kendo UI for Angular provides themes that you can use to style your application.
Currently, the suite ships the following themes:
| Theme name | Theme characteristics | Theme package NPM module |
|---|---|---|
| Kendo UI Default theme | Kendo UI own neutral styling | @progress/kendo-theme-default |
| Kendo UI Bootstrap theme | Matches the Bootstrap 4 styling | @progress/kendo-theme-bootstrap |
| Kendo UI Material theme | Follows the Material Design Guidelines | @progress/kendo-theme-material |
| Kendo UI Fluent theme | Follows the Fluent Design System | @progress/kendo-theme-fluent |
Start Free Trial
Installation
-
To start using a theme, install its package through NPM.
sh# Default theme npm install --save @progress/kendo-theme-default # Bootstrap theme npm install --save @progress/kendo-theme-bootstrap # Material theme npm install --save @progress/kendo-theme-material # Fluent theme npm install --save @progress/kendo-theme-fluent -
After the theme package is installed, reference it in your project. You can include
kendo-themesin your project in one of the following ways:- By using an external (CDN) link;
- By using a precompiled CSS file;
- By compiling the theme from the SCSS source files.
Using External (CDN) Links
The simplest way is to paste a CDN link in the head element of your page.
<head>
<!-- Default theme -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/default/default-main.css" />
<!-- Bootstrap theme -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/bootstrap/bootstrap-main.css" />
<!-- Material theme -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/material/material-main.css" />
<!-- Fluent theme -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/fluent/fluent-main.css" />
</head>
<body>...</body>Similarly to the main themes, you can load a swatch by using a CDN link.
<!-- Default theme with Ocean Blue swatch -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/default/default-ocean-blue.css" />
<!-- Booststrap theme with Main Dark swatch -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/bootstrap/bootstrap-main-dark.css" />Using Precompiled CSS
Each Kendo UI theme includes a precompiled dist/all.css CSS file that contains the styles for all Kendo UI components.
node_modules/@progress/kendo-theme-default/dist/all.cssTo use dist/all.css, reference it in the angular.json file of the application.
{
"apps": [
{
"styles": [
{
"input": "node_modules/@progress/kendo-theme-default/dist/all.css"
}
]
}
]
}The swatches for each theme are distributed with the theme package, and you can find their SCSS files in the dist folder of the package:
node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scssTo use dist/default-ocean-blue.scss, reference it in the angular.json file of the application.
{
"apps": [
{
"styles": [
{
"input": "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss"
}
]
}
]
}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 Themes 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 or import the styles for all components.
-
In the
angular.jsonfile reference the SASS file where the theme is imported.ts"architect": { "build": { "options": { "styles": [ "src/styles.scss" ] } } }
Importing Specific Component Styles
All Kendo UI for Angular components have a dedicated folder in the Kendo UI themes which contains the SCSS files required for the given component.
As of Angular 15, the tilde (
~) import in theangular-devkitpackage is deprecated. For Angular 14 and earlier versions, you can still use the old import statement~@progress/kendo-theme-default/dist/all.scss.
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.
The following list shows some of the CSS packages which are needed for a particular NPM package. Import the styles in the styles.scss file. Check the list of all available component styles.
// Import only the Charts, Grid, and DatePicker styles by using Node Sass.
@import "@progress/kendo-theme-default/scss/dataviz/_index.scss";
@import "@progress/kendo-theme-default/scss/grid/_index.scss";
@import "@progress/kendo-theme-default/scss/datepicker/_index.scss";
// Import only the Charts, Grid, and DatePicker styles by using Dart Sass.
@use "@progress/kendo-theme-default/scss/dataviz/_index.scss";
@use "@progress/kendo-theme-default/scss/grid/_index.scss";
@use "@progress/kendo-theme-default/scss/datepicker/_index.scss";Importing All Components Styles
You can include the styles for all available components from the dist/all.scss file of the corresponding theme package . However, this will significantly increase the build time and bundle size of the application.
Import the styles in the styles.scss file.
@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.