Use the Themebuilder-Variables in own Code

[Hendrik]

I would like to use a Thembuilder Variable like --kendo-color-primary in my Blazor-Project to bind the colors in my own controls to my actual Themebuilder -css-File, but the asumed variable "--kendo-color-primary" does not even exists in the .css-File. How can I achieve my goal ?

 

[Nick Iliev]

Hey Hendrik,

 

The Kendo themes recently introduced support for CSS variables. Up until version 7. x.x, only the Kendo Fluent theme fully supported CSS variables, while all other flavors (like Kendo Default, Kendo Bootstrap, etc.) were based on SCSS variables.

That started to change with version 8.0.0, where more Kendo theme flavors are now starting to use CSS variables. For example, with Kendo Default version 8.0.0, you can now access the --kendo-color-primary variable through the CSS. 

However, the change to CSS variables is still in progress for the core flavors, which are still based on SCSS variables. The recommendation is to use SCSS or Kendo Fluent and its compiled CSS (where there is support for CSS variables from earlier versions). To generate a theme that uses Kendo theme version 8.0.0, you must use ThemeBuilder project version Q2 2024. If you are using an older version of ThemeBuilder, then only the Kendo Fluent theme will support CSS variables.

As a side note, when using Kendo Fluent and ThemeBuilder Q2 2024, you can access custom CSS variables through the tb- prefix. For example, with the generated CSS from ThemeBuilder for a Fluent project, you can access a variable called --tb-kendo-color-primary. Details on that matter can be found in the following documentation article:

https://docs.telerik.com/themebuilder/knowledge-base/modifying-values-themebuilder#variables-with-prefix-tb- 

I hope the above clarifies the possibility of using CSS variables, but please let us know if you need additional details.

 

 

Regards,
Nick Iliev
Progress Telerik

[Hendrik]

Hello Nick,

Thank you very much. That helped a lot! Now I can switch between styles/themes just by changing some CSS variables. Mainly the primary color for background and text is changing in my case, and now I do not have to switch between different CSS files anymore! And I tried Kendo Fluent for the first time, and everything looks even better now! ;-)