Customizing Color System
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-color-primary | Color | #ff6358 | #ff6358 |
Description
The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme. | |||
| $kendo-color-primary-contrast | Color | k-contrast-legacy( $kendo-color-primary ) | white |
Description
The color used along with the primary color denoted by $kendo-color-primary. Used to provide contrast between the background and foreground colors. | |||
| $kendo-color-secondary | Color | #666666 | #666666 |
Description
The secondary color of the theme. | |||
| $kendo-color-secondary-contrast | Color | k-contrast-legacy( $kendo-color-secondary ) | white |
Description
The color used along with the secondary color denoted by $kendo-color-secondary. Used to provide contrast between the background and foreground colors. | |||
| $kendo-color-tertiary | Color | #03a9f4 | #03a9f4 |
Description
The tertiary color of the theme. | |||
| $kendo-color-tertiary-contrast | Color | k-contrast-legacy( $kendo-color-tertiary ) | white |
Description
The color used along with the tertiary color denoted by $kendo-color-tertiary. Used to provide contrast between the background and foreground colors. | |||
| $kendo-color-info | Color | #0058e9 | #0058e9 |
Description
The color for informational messages and states. | |||
| $kendo-color-success | Color | #37b400 | #37b400 |
Description
The color for success messages and states. | |||
| $kendo-color-warning | Color | #ffc000 | #ffc000 |
Description
The color for warning messages and states. | |||
| $kendo-color-error | Color | #f31700 | #f31700 |
Description
The color for error messages and states. | |||
| $kendo-color-dark | Color | #424242 | #424242 |
Description
The dark color of the theme. | |||
| $kendo-color-light | Color | #ebebeb | #ebebeb |
Description
The light color of the theme. | |||
| $kendo-color-inverse | Color | if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) | #424242 |
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark | |||
