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

null

null

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

null

null

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

null

null

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

none

none

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

( sm: ( font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ), md: ( font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px ), lg: ( font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px ) )

(sm: (font-size: null, track-width: 26px, track-height: 12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px), md: (font-size: null, track-width: 32px, track-height: 14px, thumb-width: 20px, thumb-height: 20px, thumb-offset: -3px, label-offset: 0px), lg: (font-size: null, track-width: 38px, track-height: 16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px))

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

rgba( if( $dark-theme, $white, $black ), .38 )

rgba(0, 0, 0, 0.38)

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

null

null

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

null

null

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 hovered switch is not checked.
$kendo-switch-off-track-hover-textNull

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

null

null

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

if( $dark-theme, $black, $white )

white

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

null

null

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

null

null

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

rgba( $primary, .54 )

rgba(63, 81, 181, 0.54)

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

null

null

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

null

null

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

null

null

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

$primary

#3f51b5

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

null

null

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

null

null

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?