Customizing Common

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-border-radiusNumber

$border-radius

0.375rem

Description
Border radius for all components.
$kendo-base-bgColor

$gray-100

#f8f9fa

Description
The background of the components' chrome area.
$kendo-base-textColor

$kendo-body-text

#212529

Description
The text color of the components' chrome area.
$kendo-base-borderColor

k-try-shade( $kendo-base-bg, 1 )

#e4e5e6

Description
The border color of the components' chrome area.
$kendo-base-gradientNull

null

null

Description
The gradient background of the components' chrome area.
$kendo-hover-bgColor

$gray-200

#e9ecef

Description
The background of hovered items.
$kendo-hover-textColor

$kendo-base-text

#212529

Description
The text color of hovered items.
$kendo-hover-borderColor

k-try-shade( $kendo-hover-bg, 1 )

#d6d9dc

Description
The border color of hovered items.
$kendo-hover-gradientNull

null

null

Description
The gradient background of hovered items.
$kendo-selected-bgColor

$kendo-color-primary

#0d6efd

Description
The background of selected items.
$kendo-selected-textColor

k-contrast-color( $kendo-selected-bg )

white

Description
The text color of selected items.
$kendo-selected-borderColor

k-try-shade( $kendo-selected-bg, 1 )

#0c65e9

Description
The border color of selected items.
$kendo-selected-gradientNull

null

null

Description
The gradient background of selected items.

In this article

Not finding the help you need?