This article explains how to use the ZIP file that you export from ThemeBuilder and build a partial theme that includes a subset of component styles. Partial themes are helpful when you do not use all UI components and want to trim down the size of the generated CSS.
Each exported ThemeBuilder theme is a package that includes the theme's source files. You can modify and rebuild the theme as part of your build process. The theme source files are located in the
scss folder of the theme package.
To build a custom theme by using the theme variables, apply either of the following approaches:
- (Recommended) Use the build process of your application—This approach simplifies upgrades to new component and theme package versions.
- Use the build process of the themes—This approach requires you to build the theme each time the theme packages are updated.
With this setup, you can customize the theme for specific components directly in your application. For example, you can style the PanelBar and Grid components in ThemeBuilder and then manually compile the styles for these components from the exported theme. The generated ThemeBuilder output contains the raw SCSS files. To use their styles in your application and compile the Sass files:
Extract the zip archive.
Navigate to the folder
scssfolder to your application.
If your theme uses custom fonts, copy the
fontsfolder as well.
index.scssfile into your application.
Install the Telerik and Kendo UI theme.
npm install --save @progress/kendo-theme-default
Go to your application's
Navigate to the theme folder, for example,
dist/allfile adds the styles for all components that are available in the theme. To trim down the size of the generated themes:
For the Default, Bootstrap, and Material themes, import only the source for the components that you use in your application. You can find each of them in the
// Import only the PanelBar and Grid styles using Node Sass @import "~@progress/kendo-theme-default/scss/panelbar/_index.scss"; @import "~@progress/kendo-theme-default/scss/grid/_index.scss"; // or using Dart Sass @import "~@progress/kendo-theme-default/scss/panelbar/"; @import "~@progress/kendo-theme-default/scss/grid/";
For the Fluent theme, pick only the styles for the components that you need with the following code:
// Import only Button and Grid styles @use "~@progress/kendo-theme-fluent/scss/index.scss" as kendo-theme; @include kendo-theme.config( $components: ( "button", "grid" ) ); @include kendo-theme.styles();
For any framework specifics related to building SCSS in your application, see the following articles:
- Customizing Themes in React Apps
- Customizing Themes in Angular Apps
- Customizing Themes in Vue Apps
- Customizing Themes in Blazor Apps
- Customizing Themes in jQuery Apps
- Customizing Themes in ASP.NET MVC Apps
- Customizing Themes in ASP.NET Core Apps
- Customizing Themes in JSP Apps
- Customizing Themes in PHP Apps
While each Sass-based theme has a dedicated NPM package (for example, @progress/kendo-theme-default), the source code for all themes is located in the kendo-themes repository. In this repository, you will find a build task that compiles the theme sources to CSS. To customize a theme, modify the source code of the theme and use the build task to produce a CSS file for your application. This approach eliminates the requirement to set up a build configuration when you compile SCSS but may be harder to maintain as you must repeat the process each time you update a theme. How to compile the themes depends on your UI component library: