Reducing the Theme Size

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:

  1. (Recommended) Use the build process of your application—This approach simplifies upgrades to new component and theme package versions.
  2. Use the build process of the themes—This approach requires you to build the theme each time the theme packages are updated.

Using the Build Process of Your Application

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:

  1. Extract the zip archive.

  2. Navigate to the folder my-themebuilder-project-name/dist.

  3. Copy the scss folder to your application.

    If your theme uses custom fonts, copy the fonts folder as well.

  4. Import the index.scss file into your application.

      @import '~[FOLDER_PATH]/scss/index.scss';

  5. Install the Telerik and Kendo UI theme.

      npm install --save @progress/kendo-theme-default

  6. Go to your application's node_module folder.

  7. Navigate to the theme folder, for example, @progress/kendo-theme-default.

  8. The dist/all file 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 scss/folder.

        // 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:

Using the Build Process of the Themes

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:

In this article
Related articles
Not finding the help you need?