Material Theme

Color in the Telerik and Kendo UI Material Theme

The color system in the Telerik and Kendo UI Material 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 Material theme. To learn how the Telerik and Kendo UI design system implements colors through its color system, see the Color Overview article.

Predefined Theme Colors

The color system of the Telerik and Kendo UI Material theme is constructed by organizing all Color Swatches in a $kendo-colors Sass map, where the key is the color name (for example, on-primary) and the corresponding color value is taken from the theme's Color Palettes.

The $kendo-colors Sass map of the Telerik and Kendo UI Material theme is represented in the following table:

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:

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

// Import the Material theme.
@import "@progress/kendo-theme-material/dist/all.scss";

.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 Material 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 Material 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.
$kendo-enable-color-system: true;

// Modify the colors map before importing the theme.
$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,
);

@import "@progress/kendo-theme-material/scss/dist/all.scss";

CSS Variables

Another way to customize the color system of the Material 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.
}