New to Kendo UI for Angular? Start a free 30-day trial
Customizing Color System
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-color-white | Color | #ffffff | #ffffff |
Description
The color white. Note: you cannot change this value. | |||
| $kendo-color-black | Color | #000000 | #000000 |
Description
The color black. Note: you cannot change this value. | |||
| $kendo-color-primary | Color | material-color( $primary-palette, main ) | #3f51b5 |
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 | material-color( $primary-palette, main-contrast ) | 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 | material-color( $secondary-palette, main ) | #e51a5f |
Description
The secondary color of the theme. | |||
| $kendo-color-secondary-contrast | Color | material-color( $secondary-palette, main-contrast ) | 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 | material-color($tertiary-palette, main) | #00695c |
Description
The tertiary color of the theme. | |||
| $kendo-color-tertiary-contrast | Color | material-color($tertiary-palette, main-contrast) | 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 | get-base-hue( gray, 800 ) | #424242 |
Description
The dark color of the theme. | |||
| $kendo-color-light | Color | get-base-hue( gray, 100 ) | #f5f5f5 |
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 | |||
| $kendo-color-white | Color | #ffffff | #ffffff |
Description
The color white. Note: you cannot change this value. | |||
| $kendo-color-black | Color | #000000 | #000000 |
Description
The color black. Note: you cannot change this value. | |||
