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.
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.
shnpm install @progress/kendo-theme-default
-
Create a
.scss
file that will consume the theme. For the purposes of the example, this isApp.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 thescss/index.scss
file and the corresponding mixins for desired components. Each of them can be found in thescss/index.scss
file under thekendo-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.