Installation of the Themes
All Telerik and Kendo UI themes are available as NPM modules.
To install them, use the following commands:
# 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
# Classic theme
npm install --save @progress/kendo-theme-classic
You can include a theme in your project in either 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) Link
To reference a theme stylesheet that is hosted on the Telerik and Kendo server, add the CDN link in the head element of your page.
<!-- 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" />
<!-- Classic theme -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/$THEME_VERSION/classic/classic-main.css" />
Alternatively, you can use a link extracted from unpkg, for example:
<!-- Default theme -->
<link rel="stylesheet" href="http://unpkg.com/@progress/kendo-theme-default/dist/all.css" />
Using Precompiled CSS
Each Telerik and Kendo UI theme includes a precompiled dist/all.css CSS file that contains the styles for all UI components.
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 because the theme is already compiled.
Using the Build Process of the Application
You can include a Telerik and Kendo UI theme by importing the source SCSS file.
@import "@progress/kendo-theme-default/dist/all.scss";
The dist/all.scss file adds the styles for all components that are available in the theme. To trim down the size of the generated CSS, import only the source for the components that you use in your application. Each of them can be found in the scss/ folder.
// Import only the PanelBar and Grid styles by using Node Sass.
@import "@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "@progress/kendo-theme-default/scss/grid/_index.scss";
// Import only the PanelBar and Grid styles by using Dart Sass.
@import "@progress/kendo-theme-default/scss/panelbar/";
@import "@progress/kendo-theme-default/scss/grid/";
Framework-Specific Documentation
For specific information about the themes and their features in the context of the Telerik and Kendo UI libraries, refer to the official product documentation:
