How to Use the New Kendo Color System

Environment

Product Version 15/05/2024
Product ThemeBuilder

Description

I have modified the Kendo Colors variables in my Q2 2024 ThemeBuilder project. How can I use them in my application styles?

Solution

Starting with the 2024 Q2 release of the Telerik and Kendo UI components, the Telerik and Kendo UI Themes come with a new Color System. Using the Sass and CSS variables that are based on this Color System requires a slightly different approach compared to the variables based on the Color System used before the 2024 Q2 release.

You can find all variables introduced by the 2024 Q2 Color System in the Kendo Colors group of the THEME STYLES panel. The way you customize these variables in ThemeBuilder remains unchanged, but you must consider the following when you plan to use the variables exported from ThemeBuilder:

  • To utilize the Sass output in your application, use the k-color() function. For example, to apply the $primary color variable, use k-color( primary ).
  • To utilize the CSS output in your application, prepend the variable name with the --kendo-color- prefix. For example, to apply the $primary color variable, use var( --kendo-color-primary ).
In this article
Related articles
Not finding the help you need?