Modifying Kendo Variables with ThemeBuilder
Environment
| Property | Value |
|---|---|
| Product | Progress® ThemeBuilder |
Description
To modify values of exposed Kendo SASS or CSS variables in ThemeBuilder, follow these steps:
Open the ThemeBuilder application.
Locate the variable you want to modify in the left panel. For example, you can change the primary color in the Kendo Fluent theme through the variable called $kendo-color-primary.
Edit the value of the variable to your desired customization.
Variables with prefix "tb-"
After exporting the theme, you might observe that the generated SASS/CSS files contain many variables bearing names with the prefix "tb-".
The reason for the above is that the ThemeBuilder does not directly overwrite the existing global Kendo variables. Instead, it uses a custom variable with the "tb-" prefix (for example, $tb-kendo-color-primary).
Behind the scenes, modifying a Kendo variable in ThemeBuilder does not change the value of the original Kendo variable. Instead, it changes the associated ThemeBuilder variable. The ThemeBuilder variables have the same name with the "tb-" prefix. This custom variable stores the value you added and is used in the generated theme. If you want to reuse the modified variables in your end application, ensure that you use the generated ThemeBuilder variables.