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
The exact placement of the theme's <link> tag and the overall CSS file order in the application can affect the ability to override styles from one CSS file with styles from another CSS file. If you need to override theme styles with custom CSS in the app stylesheet, then it's easier to place the app stylesheet after the Telerik and Kendo UI theme.
Using External (CDN) Link
To reference a theme stylesheet that is hosted on the UNPKG CDN, add а <link> tag with the required URL to the head element of your page.
<!-- Default theme -->
<link href="https://unpkg.com/@progress/kendo-theme-default@9.0.0/dist/default-main.css" rel="stylesheet" />
<!-- Bootstrap theme -->
<link href="https://unpkg.com/@progress/kendo-theme-bootstrap@9.0.0/dist/bootstrap-main.css" rel="stylesheet" />
<!-- Material theme -->
<link href="https://unpkg.com/@progress/kendo-theme-material@9.0.0/dist/material-main.css" rel="stylesheet" />
<!-- Fluent theme -->
<link href="https://unpkg.com/@progress/kendo-theme-fluent@9.0.0/dist/fluent-main.css" rel="stylesheet" />
<!-- Classic theme -->
<link href="https://unpkg.com/@progress/kendo-theme-classic@9.0.0/dist/classic-main.css" rel="stylesheet" />
In the above URLs, @9.0.0 specifies the theme version and main is the swatch name.
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:
