New to Kendo UI for Vue? Start a free 30-day trial
Customizing Color System
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-color-primary | Color |
|
|
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 |
|
|
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 |
|
|
Description
The secondary color of the theme. | |||
| $kendo-color-secondary-contrast | Color |
|
|
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 |
|
|
Description
The tertiary color of the theme. | |||
| $kendo-color-tertiary-contrast | Color |
|
|
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 |
|
|
Description
The color for informational messages and states. | |||
| $kendo-color-success | Color |
|
|
Description
The color for success messages and states. | |||
| $kendo-color-warning | Color |
|
|
Description
The color for warning messages and states. | |||
| $kendo-color-error | Color |
|
|
Description
The color for error messages and states. | |||
| $kendo-color-dark | Color |
|
|
Description
The dark color of the theme. | |||
| $kendo-color-light | Color |
|
|
Description
The light color of the theme. | |||
| $kendo-color-inverse | Color |
|
|
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark | |||
