Color in the Telerik and Kendo UI Default Theme
The Color System is still in BETA
and is disabled by default. Refer to the Usage section to learn how to enable it and start customizing the colors.
The color system in the Telerik and Kendo UI Default 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 Default 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 Default 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 Default theme is represented in the following table:
Key | Value |
---|---|
Variable: kendo-colors | |
app-surface |
|
on-app-surface |
|
subtle |
|
surface |
|
surface-alt |
|
border |
|
border-alt |
|
base-subtle |
|
base-subtle-hover |
|
base-subtle-active |
|
base |
|
base-hover |
|
base-active |
|
base-emphasis |
|
base-on-subtle |
|
on-base |
|
base-on-surface |
|
primary-subtle |
|
primary-subtle-hover |
|
primary-subtle-active |
|
primary |
|
primary-hover |
|
primary-active |
|
primary-emphasis |
|
primary-on-subtle |
|
on-primary |
|
primary-on-surface |
|
secondary-subtle |
|
secondary-subtle-hover |
|
secondary-subtle-active |
|
secondary |
|
secondary-hover |
|
secondary-active |
|
secondary-emphasis |
|
secondary-on-subtle |
|
on-secondary |
|
secondary-on-surface |
|
tertiary-subtle |
|
tertiary-subtle-hover |
|
tertiary-subtle-active |
|
tertiary |
|
tertiary-hover |
|
tertiary-active |
|
tertiary-emphasis |
|
tertiary-on-subtle |
|
on-tertiary |
|
tertiary-on-surface |
|
info-subtle |
|
info-subtle-hover |
|
info-subtle-active |
|
info |
|
info-hover |
|
info-active |
|
info-emphasis |
|
info-on-subtle |
|
on-info |
|
info-on-surface |
|
success-subtle |
|
success-subtle-hover |
|
success-subtle-active |
|
success |
|
success-hover |
|
success-active |
|
success-emphasis |
|
success-on-subtle |
|
on-success |
|
success-on-surface |
|
warning-subtle |
|
warning-subtle-hover |
|
warning-subtle-active |
|
warning |
|
warning-hover |
|
warning-active |
|
warning-emphasis |
|
warning-on-subtle |
|
on-warning |
|
warning-on-surface |
|
error-subtle |
|
error-subtle-hover |
|
error-subtle-active |
|
error |
|
error-hover |
|
error-active |
|
error-emphasis |
|
error-on-subtle |
|
on-error |
|
error-on-surface |
|
light-subtle |
|
light-subtle-hover |
|
light-subtle-active |
|
light |
|
light-hover |
|
light-active |
|
light-emphasis |
|
light-on-subtle |
|
on-light |
|
light-on-surface |
|
dark-subtle |
|
dark-subtle-hover |
|
dark-subtle-active |
|
dark |
|
dark-hover |
|
dark-active |
|
dark-emphasis |
|
dark-on-subtle |
|
on-dark |
|
dark-on-surface |
|
inverse-subtle |
|
inverse-subtle-hover |
|
inverse-subtle-active |
|
inverse |
|
inverse-hover |
|
inverse-active |
|
inverse-emphasis |
|
inverse-on-subtle |
|
on-inverse |
|
inverse-on-surface |
|
series-a |
|
series-a-bold |
|
series-a-bolder |
|
series-a-subtle |
|
series-a-subtler |
|
series-b |
|
series-b-bold |
|
series-b-bolder |
|
series-b-subtle |
|
series-b-subtler |
|
series-c |
|
series-c-bold |
|
series-c-bolder |
|
series-c-subtle |
|
series-c-subtler |
|
series-d |
|
series-d-bold |
|
series-d-bolder |
|
series-d-subtle |
|
series-d-subtler |
|
series-e |
|
series-e-bold |
|
series-e-bolder |
|
series-e-subtle |
|
series-e-subtler |
|
series-f |
|
series-f-bold |
|
series-f-bolder |
|
series-f-subtle |
|
series-f-subtler |
|
Description: The global default Colors map. |
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 Default theme.
@import "@progress/kendo-theme-default/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 Default theme, use either of the following approaches:
Sass Variables
One way to achieve your design requirements when working with the color system of the Default 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-default/scss/dist/all.scss";
CSS Variables
Another way to customize the color system of the Default 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.
}