New to KendoReact? Start a free 30-day trial

Customizing Themes

There are several ways to customize the appearance of the KendoReact components. Each is suitable for specific scenarios and business requirements. This article describes the pros and cons, and compares all CSS customization alternatives.

Create custom themes with the Progress ThemeBuilder
Override theme variables
Using the Build Process of the Application
Customizing Themes with Swatches
Overriding Theme Styles

Using ThemeBuilder

ThemeBuilder is a web application that enables you to create new custom themes by changing the styles of existing built-in themes. Every change that you make is visualized instantly. Once you are done styling the UI components, you can export a ZIP file with the desired styles and add the custom theme to your KendoReact app. For further information on the topic, go to the dedicated ThemeBuilder article.

Setting Theme Variables

Each theme defines the same collection of variables, but with different values. For example, here are the Default theme variables. You can override the theme variable values outside the theme CSS file. In this way, you can customize the appearance of the KendoReact components without the need to create and maintain a full custom theme.

This approach is supported starting with theme version 8.0.0 and KendoReact version 8.0.0. Upgrading the KendoReact components does not require any additional steps with regard to the CSS code, unless there are breaking changes in the CSS variable names.

Change Theme

Theme

Loading ...

Using the Build Process of the Application

When you want to built the Telerik themes yourself (for example, to combine them with the rest of your styles in to one stylesheet), review the following article first, before continuing with the steps below: https://github.com/telerik/kendo-themes/wiki/Compiling-themes.

Create React App does not support the compilation of SCSS files out of the box. For more information, refer to the Adding a Sass Stylesheet article. Note that the LibSass and the packages built on top of it, including Node Sass, are deprecated (check out the node-sass NPM package article). If you're using Node Sass, you can migrate to Dart Sass by running the npm install sass --save command.

To customize a Sass-based theme, create a .scss file and consume the theme package in the following way:

Obtain the theme source through the NPM package.
sh
```
npm install @progress/kendo-theme-default
```
Create a .scss file that will consume the theme. For the purposes of the example, this is App.scss.
To build the theme files, import them into the App.scss file.

After version v10.0.0 of the Kendo themes, the Sass syntax has been migrated to Dart Sass. The following snippets demonstrate the theme customization after version 10.0.0 and later.
scss
```
// App.scss
@use '@progress/kendo-theme-default/scss/all.scss' as *;
```
The scss/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. You can do that by using the scss/index.scss file and the corresponding mixins for desired components. Each of them can be found in the scss/index.scss file under the kendo-theme--styles() mixin.
scss
```
// Import only the Button and Grid styles
@use '@progress/kendo-theme-default/scss/index.scss' as *;

@include kendo-button--styles();
@include kendo-grid--styles();
```

You can customize theme variables directly in your application. For example, you can change the background of the base Button with the following lines.

scss

// Use the theme with the modified base background of the Button.
@use '@progress/kendo-theme-default/scss/all.scss' as * with (
    $kendo-button-bg: #ff69b4
);

Here is the full list of available theme variables for the Kendo Default theme.

You can further customize the other parts of the theme foundations such as:

Customizing Themes with Swatches

A swatch is a set of variables that customize the appearance of the theme. To preview and test the swatches, visit any of the demos across the KendoReact docs. Choose a product, go to its online component demos, and enable the swatch from the Change Theme dropdown above any of the examples. For more information on how to use swatches or creating a custom one, refer to the Swatches section in the Progress Design System Documentation.

Overriding Theme Styles

You can override theme styles with custom CSS, no matter if the app is using a built-in or custom theme. This approach makes sense only for a relatively small number of customizations. Beyond that, choose some of the other alternatives on this page.

Upgrading may require changes to the additional custom CSS code, but only if there are breaking changes in the HTML output and styling.