Fluent Theme

Color in the Telerik and Kendo UI Fluent Theme

The color system in the Telerik and Kendo UI Fluent theme enables you to easily define and customize colors, allowing you to create a color theme that reflects your brand or style.

This article explains what are the predefined color values and how to customize them specifically in the Telerik and Kendo UI Fluent theme. To learn how the Telerik and Kendo UI design system implements colors through its color system, see the Color Overview article.

Usage

You can use the $kendo-colors map as is or customize it to fit your specific design needs.

To use the predefined values, the recommended approach is to utilize the k-color() function, which takes a color name from the $kendo-colors map as a parameter and returns a CSS variable (custom property) with the actual color as a fallback:

// Import the Fluent theme.
@use "@progress/kendo-theme-fluent/scss/index.scss" as *;

// Enable the new color system.
$kendo-enable-color-system: true;

@include config();
@include styles();

.my-element {
background-color: k-color( primary ); // Apply the primary color as a background color to .my-element.
}

The k-color() function utilized above returns the following CSS code:

.my-element {
background-color: var(--kendo-color-primary, #ff6358);
}

Customization

To customize the color system in the Telerik and Kendo UI Fluent theme, use either of the following approaches:

• Modify the Sass variables.
• Modify the CSS variables.

Sass Variables

One way to achieve your design requirements when working with the color system of the Fluent theme is to customize the predefined $kendo-colors Sass map. You can modify either all values in the $kendo-colors Sass map or only those that belong to a specific color swatch, for example, primary:

// Enable the new color system.
@use "@progress/kendo-theme-fluent/scss/index.scss" as *;

// Enable the new color system.
$kendo-enable-color-system: true;

// Modify the colors map before outputing the theme styles.
$kendo-colors: map-merge(
$kendo-colors,
(
primary-subtle: #ffeceb,
primary-subtle-hover: #ffdedb,
primary-subtle-active: #ffc8c4,
primary: #ff6358,
primary-hover: #ea5a51,
primary-active: #d45349,
primary-emphasis: #ff9d97,
primary-on-subtle: #5c201c,
on-primary: #ffffff,
primary-on-surface: #ff6358,
)
);

@include config();
@include styles();

CSS Variables

Another way to customize the color system of the Fluent theme is to modify the CSS variables as each value in the Sass map is also represented as a CSS variable (custom property) and exposed at the root level:

:root {
--kendo-color-primary-subtle: #ffeceb;
--kendo-color-primary-subtle-hover: #ffdedb;
--kendo-color-primary-subtle-active: #ffc8c4;
--kendo-color-primary: #ff6358;
--kendo-color-primary-hover: #ea5a51;
--kendo-color-primary-active: #d45349;
--kendo-color-primary-emphasis: #ff9d97;
--kendo-color-primary-on-subtle: #5c201c;
--kendo-color-on-primary: #ffffff;
--kendo-color-primary-on-surface: #ff6358;
// Repeats for all colors
// ...
}

Using the CSS variables allows for greater flexibility and easier customization when applying colors to various elements. For example, here is how you can apply these custom properties in your code:

.my-element {
background-color: var(--kendo-color-primary) // Apply the primary color to .my-element.
}