Customizing Color System

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-color-primaryColor

$primary

#0d6efd

Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$kendo-color-primary-contrastColor

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-secondaryColor

$secondary

#6c757d

Description
The secondary color of the theme.
$kendo-color-secondary-contrastColor

k-contrast-color( $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-tertiaryColor

$purple

#6f42c1

Description
The tertiary color of the theme.
$kendo-color-tertiary-contrastColor

k-contrast-color( $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-infoColor

$info

#0dcaf0

Description
The color for informational messages and states.
$kendo-color-successColor

$success

#198754

Description
The color for success messages and states.
$kendo-color-warningColor

$warning

#ffc107

Description
The color for warning messages and states.
$kendo-color-errorColor

$danger

#dc3545

Description
The color for error messages and states.
$kendo-color-darkColor

$dark

#212529

Description
The dark color of the theme.
$kendo-color-lightColor

$light

#f8f9fa

Description
The light color of the theme.
$kendo-color-inverseColor

if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )

#212529

Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark

In this article

Not finding the help you need?