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

Customizing Switch

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-switch-font-familyNull

null

null

Description
Font family of the switch.
$kendo-switch-track-border-widthNumber

1px

1px

Description
Border width of the switch track.
$kendo-switch-thumb-border-widthNumber

1px

1px

Description
Border width of the switch thumb.
$kendo-switch-label-text-transformString

uppercase

uppercase

Description
Text transform of the switch label.
$kendo-switch-label-displayString

inline

inline

Description
Display of the switch label.
$kendo-switch-sizesMap

( sm: ( font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px ), md: ( font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px ), lg: ( font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px ) )

(sm: (font-size: 10px, track-width: 52px, track-height: 26px, thumb-width: 26px, thumb-height: 26px, thumb-offset: 0px, label-offset: 4px), md: (font-size: 10px, track-width: 60px, track-height: 30px, thumb-width: 30px, thumb-height: 30px, thumb-offset: 0px, label-offset: 6px), lg: (font-size: 10px, track-width: 68px, track-height: 34px, thumb-width: 34px, thumb-height: 34px, thumb-offset: 0px, label-offset: 8px))

Description
Map with the different switch sizes.
$kendo-switch-off-track-bgColor

$component-bg

#ffffff

Description
The background of the track when the switch is not checked.
$kendo-switch-off-track-textColor

$component-text

#424242

Description
The text color of the track when the switch is not checked.
$kendo-switch-off-track-borderColor

try-shade( $kendo-switch-off-track-bg, 8% )

#ebebeb

Description
The border color of the track when the switch is not checked.
$kendo-switch-off-track-gradientNull

null

null

Description
The background gradient of the track when the switch is not checked.
$kendo-switch-off-track-hover-bgNull

null

null

Description
The background of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-textNull

null

null

Description
The text color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-borderNull

null

null

Description
The border color of the track when the hovered switch is not checked.
$kendo-switch-off-track-hover-gradientNull

null

null

Description
The background gradient of the track when the hovered switch is not checked.
$kendo-switch-off-track-focus-bgNull

null

null

Description
The background of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-textNull

null

null

Description
The text color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-borderNull

null

null

Description
The border color of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-gradientNull

null

null

Description
The background gradient of the track when the focused switch is not checked.
$kendo-switch-off-track-focus-ringList

2px solid rgba( if( $dark-theme, $white, $black ) , .08 )

2px solid rgba(0, 0, 0, 0.08)

Description
The ring around the track when the focused switch is not checked.
$kendo-switch-off-track-disabled-bgNull

null

null

Description
The background of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-textNull

null

null

Description
The text color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-borderNull

null

null

Description
The border color of the track when the disabled switch is not checked.
$kendo-switch-off-track-disabled-gradientNull

null

null

Description
The background gradient of the track when the disabled switch is not checked.
$kendo-switch-off-thumb-bgColor

$base-bg

#fafafa

Description
The background of the thumb when the switch is not checked.
$kendo-switch-off-thumb-textColor

$base-text

#424242

Description
The text color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-borderColor

$base-border

rgba(0, 0, 0, 0.08)

Description
The border color of the thumb when the switch is not checked.
$kendo-switch-off-thumb-gradientNull

null

null

Description
The background gradient of the thumb when the switch is not checked.
$kendo-switch-off-thumb-hover-bgNull

null

null

Description
The background of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-textNull

null

null

Description
The text color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-borderNull

null

null

Description
The border color of the thumb when the hovered switch is not checked.
$kendo-switch-off-thumb-hover-gradientNull

null

null

Description
The background gradient of the thumb when the hovered switch is not checked.
$kendo-switch-on-track-bgColor

$primary

#ff6358

Description
The background of the track when the switch is checked.
$kendo-switch-on-track-textColor

contrast-wcag( $kendo-switch-on-track-bg )

white

Description
The text color of the track when the switch is checked.
$kendo-switch-on-track-borderColor

$kendo-switch-on-track-bg

#ff6358

Description
The border color of the track when the switch is checked.
$kendo-switch-on-track-gradientNull

null

null

Description
The background gradient of the track when the switch is checked.
$kendo-switch-on-track-hover-bgNull

null

null

Description
The background of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-textNull

null

null

Description
The text color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-borderNull

null

null

Description
The border color of the track when the hovered switch is checked.
$kendo-switch-on-track-hover-gradientNull

null

null

Description
The background gradient of the track when the hovered switch is checked.
$kendo-switch-on-track-focus-bgNull

null

null

Description
The background of the track when the focused switch is checked.
$kendo-switch-on-track-focus-textNull

null

null

Description
The text color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-borderNull

null

null

Description
The border color of the track when the focused switch is checked.
$kendo-switch-on-track-focus-gradientNull

null

null

Description
The background gradient of the track when the focused switch is checked.
$kendo-switch-on-track-focus-ringList

2px solid rgba( $kendo-switch-on-track-border, .25 )

2px solid rgba(255, 99, 88, 0.25)

Description
The ring around the track when the focused switch is checked.
$kendo-switch-on-track-disabled-bgNull

null

null

Description
The background of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-textNull

null

null

Description
The text color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-borderNull

null

null

Description
The border color of the track when the disabled switch is checked.
$kendo-switch-on-track-disabled-gradientNull

null

null

Description
The background gradient of the track when the disabled switch is checked.
$kendo-switch-on-thumb-bgColor

$base-bg

#fafafa

Description
The background of the thumb when the switch is checked.
$kendo-switch-on-thumb-textColor

$base-text

#424242

Description
The text color of the thumb when the switch is checked.
$kendo-switch-on-thumb-borderColor

$base-border

rgba(0, 0, 0, 0.08)

Description
The border color of the thumb when the switch is checked.
$kendo-switch-on-thumb-gradientNull

null

null

Description
The background gradient of the thumb when the switch is checked.
$kendo-switch-on-thumb-hover-bgNull

null

null

Description
The background of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-textNull

null

null

Description
The text color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-borderNull

null

null

Description
The border color of the thumb when the hovered switch is checked.
$kendo-switch-on-thumb-hover-gradientNull

null

null

Description
The background gradient of the thumb when the hovered switch is checked.

In this article

Not finding the help you need?