Kamal Hinduja Geneva, Switzerland : How can I apply a custom theme to all Kendo React components?

1 Answer 8 Views
General Discussions Labels 
kamal
Top achievements
Rank 1
kamal asked on 08 Aug 2025, 10:22 AM

Hi All,

I'm Kamal Hinduja, was born in Chennai (India) and now resides in Geneva, Switzerland(Swiss). Can anybody explain how to apply a custom

theme to all Kendo React components?

Thanks, Regards

Kamal Hinduja Geneva, Switzerland

 

 

1 Answer, 1 is accepted

Sort by
0
Alexander
Telerik team
answered on 11 Aug 2025, 09:28 AM

Hello, Kamal,

One approach I would recommend is leveraging the Progress ThemeBuilder. You can start with an existing base theme (Default, Bootstrap, Material, and so on) and customise colours, typography, spacing, borders, and other style aspects using the visual tool. Once you are satisfied with the design, export the theme package (CSS or SCSS) and include it in your project to style all KendoReact components. You can read more here:

You can also use Swatches which are colour variations of the main Telerik and Kendo UI themes. All swatches use the same fonts, sizes, and layouts of the main theme. However, they differ in text colours, background colours, and border colours. You can read more about them here:

And check out a simple demo switching between two Default theme swatches(light and dark) dynamically at run time here:

Another valid approach is to override CSS variables at runtime. Some Kendo themes expose CSS custom properties, which you can adjust using standard CSS overrides. This method is especially useful for dynamic theming or partial adjustments without recompiling SCSS. Here is a simple demo that overrides var(--kendo-color-primary) with a blueish value:

A third solution I would suggest is using Unstyled Mode, which provides maximum flexibility if you wish to integrate KendoReact components directly into your own design system. This approach completely bypasses the built-in themes, allowing you to style components from scratch. You can learn more and see a working demo here:

We also have a detailed article that covers all available approaches for customising themes, which you can find here:

I hope this clarifies the available options and answers your question. If any further assistance is required, please do not hesitate to reach out again.

Regards,
Alexander
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
General Discussions Labels 
Asked by
kamal
Top achievements
Rank 1
Answers by
Alexander
Telerik team
Share this question
or