New to Kendo UI for Angular? Start a free 30-day trial

Customizing Common

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-border-radiusNumber

map-get( $spacing, 1 )

4px

Description
Border radius for all components.
$base-bgColor

map-get( $theme, base-bg )

white

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

map-get($theme, component-text)

rgba(0, 0, 0, 0.87)

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

rgba( if($theme-type == dark, white, black), .08 )

rgba(0, 0, 0, 0.08)

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

null

null

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

map-get( $theme, hover-bg )

rgba(0, 0, 0, 0.04)

Description
The background of hovered items.
$hovered-textColor

$base-text

rgba(0, 0, 0, 0.87)

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

rgba( if($theme-type == dark, white, black), .15 )

rgba(0, 0, 0, 0.15)

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

null

null

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

$secondary

#e51a5f

Description
The background of selected items.
$selected-textColor

$secondary-contrast

white

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

rgba( if($theme-type == dark, white, black), .1 )

rgba(0, 0, 0, 0.1)

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

null

null

Description
The gradient background of selected items.
$kendo-input-font-familyList

$font-family

Roboto, "Helvetica Neue", sans-serif

Description
Font family of input components.
@group input

In this article

Not finding the help you need?