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	`#622331`	`#622331`
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-color( $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-info	Color	`#0969da`	`#0969da`
Description The color for informational messages and states.
$kendo-color-success	Color	`#1a7f37`	`#1a7f37`
Description The color for success messages and states.
$kendo-color-warning	Color	`#bc4c00`	`#bc4c00`
Description The color for warning messages and states.
$kendo-color-error	Color	`#cf222e`	`#cf222e`
Description The color for error messages and states.
$kendo-color-dark	Color	`#404040`	`#404040`
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 )`	`#404040`
Description Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark