New to Kendo UI for Angular? Start a free 30-day trial
Customization
The following table lists the available variables for customizing the Bootstrap theme.
Variables
Common
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $border-radius | $border-radius | $border-radius | |
Description Border radius for all components. | |||
| $base-bg | $gray-100 | ||
Description The background of the components' chrome area. | |||
| $base-text | $body-text | ||
Description The text color of the components' chrome area. | |||
| $base-border | try-shade( $base-bg, 1 ) | try-shade( $base-bg, 1 ) | |
Description The border color of the components' chrome area. | |||
| $base-gradient | null | null | |
Description The gradient background of the components' chrome area. | |||
| $hovered-bg | $gray-200 | ||
Description The background of hovered items. | |||
| $hovered-text | $base-text | ||
Description The text color of hovered items. | |||
| $hovered-border | try-shade( $hovered-bg, 1 ) | try-shade( $hovered-bg, 1 ) | |
Description The border color of hovered items. | |||
| $hovered-gradient | null | null | |
Description The gradient background of hovered items. | |||
| $selected-bg | $primary | $primary | |
Description The background of selected items. | |||
| $selected-text | contrast-wcag( $selected-bg ) | contrast-wcag( $selected-bg ) | |
Description The text color of selected items. | |||
| $selected-border | try-shade( $selected-bg, 1 ) | try-shade( $selected-bg, 1 ) | |
Description The border color of selected items. | |||
| $selected-gradient | null | null | |
Description The gradient background of selected items. | |||
Buttons
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $button-border-width | $btn-border-width | ||
Description Width of border around buttons | |||
| $button-border-radius | $border-radius | $border-radius | |
Description Border radius of buttons | |||
| $button-padding-x | $btn-padding-x | ||
Description Horizontal padding of buttons | |||
| $button-padding-y | $btn-padding-y | ||
Description Vertical padding of buttons | |||
| $button-bg | #e4e7eb | #e4e7eb | |
Description The background of the buttons. | |||
| $button-text | contrast-wcag( $button-bg, $gray-900 ) | contrast-wcag( $button-bg, $gray-900 ) | |
Description The text color of the buttons. | |||
| $button-border | $button-bg | #e4e7eb | |
Description The border color of the buttons. | |||
| $button-gradient | null | null | |
Description The background gradient of the buttons. | |||
| $button-hovered-bg | try-darken( $button-bg, 7.5% ) | try-darken( $button-bg, 7.5% ) | |
Description The background of hovered buttons. | |||
| $button-hovered-text | null | null | |
Description The text color of hovered buttons. | |||
| $button-hovered-border | try-darken( $button-border, 10% ) | try-darken( $button-border, 10% ) | |
Description The border color of hovered buttons. | |||
| $button-hovered-gradient | null | null | |
Description The background gradient of hovered buttons. | |||
| $button-active-bg | try-darken( $button-bg, 10% ) | try-darken( $button-bg, 10% ) | |
Description The background color of active buttons. | |||
| $button-active-text | null | null | |
Description The text color of active buttons. | |||
| $button-active-border | try-darken( $button-border, 12.5% ) | try-darken( $button-border, 12.5% ) | |
Description The border color of active buttons. | |||
| $button-active-gradient | null | null | |
Description The background gradient of active buttons. | |||
| $button-selected-bg | try-darken( $primary, 10% ) | try-darken( $primary, 10% ) | |
Description The background color of selected buttons. | |||
| $button-selected-text | contrast-wcag( $button-selected-bg ) | contrast-wcag( $button-selected-bg ) | |
Description The text color of selected buttons. | |||
| $button-selected-border | try-darken( $primary, 12.5% ) | try-darken( $primary, 12.5% ) | |
Description The border color of selected buttons. | |||
| $button-selected-gradient | null | null | |
Description The background gradient of selected buttons. | |||
| $button-focused-shadow | 0 0 0 3px rgba( $button-border, .5 ) | 0 0 0 3px rgba( $button-border, .5 ) | |
Description The shadow of focused buttons. | |||
Charts
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $series-a | #0275d8 | #0275d8 | |
Description The first base series color and its light and dark shades. | |||
| $series-b | #5bc0de | #5bc0de | |
Description The second base series color and its light and dark shades. | |||
| $series-c | #5cb85c | #5cb85c | |
Description The third base series color and its light and dark shades. | |||
| $series-d | #f0ad4e | #f0ad4e | |
Description The fourth base series color and its light and dark shades. | |||
| $series-e | #e67d4a | #e67d4a | |
Description The fifth base series color and its light and dark shades. | |||
| $series-f | #d9534f | #d9534f | |
Description The sixth base series color and its light and dark shades. | |||
| $series-1 | $series-a | #0275d8 | |
Description The series colors in order: base, light, dark, lighter, darker | |||
| $chart-major-lines | rgba( if( $dark-theme, $white, $black ), .08 ) | rgba( if( $dark-theme, $white, $black ), .08 ) | |
Description The color of the Chart grid lines (major). | |||
| $chart-minor-lines | rgba( if( $dark-theme, $white, $black ), .04 ) | rgba( if( $dark-theme, $white, $black ), .04 ) | |
Description The color of the Chart grid lines (minor). | |||
Color System
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $accent | Color | $primary | $primary |
Deprecated Will be removed in v5. Use `$primary` variable instead. Description The color that focuses the user attention. | |||
| $accent-contrast | Color | contrast-wcag( $accent ) | contrast-wcag( $accent ) |
Deprecated Will be removed in v5. Use `$primary-contrast` variable instead. Description The color used along with the primary color denoted by $primary. | |||
| $primary | Color | $primary | $primary |
Description The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme. | |||
| $primary-contrast | Color | contrast-wcag( $primary ) | contrast-wcag( $primary ) |
Description The color used along with the primary color denoted by $primary. Used to provide contrast between the background and foreground colors. | |||
| $secondary | Color | $secondary | $secondary |
Description The secondary color of the theme. | |||
| $secondary-contrast | Color | contrast-wcag( $secondary ) | contrast-wcag( $secondary ) |
Description The color used along with the secondary color denoted by $secondary. Used to provide contrast between the background and foreground colors. | |||
| $tertiary | Color | $purple | |
Description The tertiary color of the theme. | |||
| $tertiary-contrast | Color | contrast-wcag( $tertiary ) | contrast-wcag( $tertiary ) |
Description The color used along with the tertiary color denoted by $tertiary. Used to provide contrast between the background and foreground colors. | |||
| $info | Color | $info | $info |
Description The color for informational messages and states. | |||
| $success | Color | $success | $success |
Description The color for success messages and states. | |||
| $warning | Color | $warning | $warning |
Description The color for warning messages and states. | |||
| $error | Color | $danger | |
Description The color for error messages and states. | |||
| $dark | Color | $dark | $dark |
Description The dark color of the theme. | |||
| $light | Color | $light | $light |
Description The light color of the theme. | |||
| $inverse | if( $dark-theme, $light, $dark ) | if( $dark-theme, $light, $dark ) | |
Description Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark | |||
Component
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $component-bg | $body-bg | ||
Description Background color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`. | |||
| $component-text | $body-text | ||
Description Text color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`. | |||
| $component-border | contrast-wcag( $component-bg, $gray-300, $gray-700 ) | contrast-wcag( $component-bg, $gray-300, $gray-700 ) | |
Description Border color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`. | |||
Grid
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $grid-bg | $component-bg | ||
Description Background color of the grid component | |||
| $grid-text | $component-text | ||
Description Text color of the grid component | |||
| $grid-border | $component-border | contrast-wcag( $component-bg, $gray-300, $gray-700 ) | |
Description Border color of the grid component | |||
| $grid-header-bg | $header-bg | ||
Description Background color of grid header | |||
| $grid-header-text | $header-text | ||
Description Text color of grid header | |||
| $grid-header-border | $header-border | ||
Description Border color of grid header | |||
| $grid-header-gradient | $header-gradient | ||
Description Background gradient of grid header | |||
| $grid-footer-bg | $grid-header-bg | ||
Description Background color of grid footer | |||
| $grid-footer-text | $grid-header-text | ||
Description Text color of grid footer | |||
| $grid-footer-border | $grid-header-border | ||
Description Border color of grid footer | |||
| $grid-alt-bg | rgba( contrast-wcag( $grid-bg ), .04 ) | rgba( contrast-wcag( $grid-bg ), .04 ) | |
Description Background color of alternating rows in grid | |||
| $grid-alt-text | null | null | |
Description Text color of alternating rows in grid | |||
| $grid-alt-border | null | null | |
Description Border color of alternating rows in grid | |||
| $grid-hovered-bg | rgba( contrast-wcag( $grid-bg ), .08 ) | rgba( contrast-wcag( $grid-bg ), .08 ) | |
Description Background color of hovered rows in grid | |||
| $grid-hovered-text | null | null | |
Description Text color of hovered rows in grid | |||
| $grid-hovered-border | null | null | |
Description Border color of hovered rows in grid | |||
| $grid-selected-bg | rgba( $selected-bg, .25 ) | rgba( $selected-bg, .25 ) | |
Description Background color of selected rows in grid | |||
| $grid-selected-text | $grid-text | ||
Description Text color of selected rows in grid | |||
| $grid-selected-border | $grid-border | contrast-wcag( $component-bg, $gray-300, $gray-700 ) | |
Description Border color of selected rows in grid | |||
Icons
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $icon-font-url | null | null | |
Description The URL to the icon font that will be used by the theme The default value of `null` embeds the package font with a `data:` URL | |||
Tabstrip
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $tabstrip-bg | null | null | |
Description Background color of tabstrip component | |||
| $tabstrip-text | $component-text | ||
Description Text color of tabstrip component | |||
| $tabstrip-border | $component-border | contrast-wcag( $component-bg, $gray-300, $gray-700 ) | |
Description Border color of tabstrip component | |||
| $tabstrip-item-padding-x | $nav-item-padding-x | ||
Description Horizontal padding of tabs | |||
| $tabstrip-item-padding-y | $nav-item-padding-y | ||
Description Vertical padding of tabs | |||
| $tabstrip-item-border-width | 1px | 1px | |
Description Width of border around tabs | |||
| $tabstrip-item-border-radius | map-get( $spacing, 1 ) | map-get( $spacing, 1 ) | |
Description Border radius of tabs | |||
| $tabstrip-item-gap | $nav-item-margin | ||
Description Spacing between tabs | |||
| $tabstrip-item-bg | null | null | |
Description Background color of tabs | |||
| $tabstrip-item-text | $link-text | ||
Description Text color of tabs | |||
| $tabstrip-item-border | null | null | |
Description Border color of tabs | |||
| $tabstrip-item-gradient | null | null | |
Description Background gradient of tabs | |||
| $tabstrip-item-hovered-bg | null | null | |
Description Background color of hovered tabs | |||
| $tabstrip-item-hovered-text | $link-hover-text | ||
Description Text color of hovered tabs | |||
| $tabstrip-item-hovered-border | $gray-200 | ||
Description Border color of hovered tabs | |||
| $tabstrip-item-hovered-gradient | null | null | |
Description Background gradient of hovered tabs | |||
| $tabstrip-item-selected-bg | $component-bg | ||
Description Background color of selected tabs | |||
| $tabstrip-item-selected-text | $component-text | ||
Description Text color of selected tabs | |||
| $tabstrip-item-selected-border | $component-border | contrast-wcag( $component-bg, $gray-300, $gray-700 ) | |
Description Border color of selected tabs | |||
| $tabstrip-item-selected-gradient | null | null | |
Description Background gradient of selected tabs | |||
| $tabstrip-content-padding-x | $tabstrip-item-padding-x | ||
Description Horizontal padding of tabstrip content | |||
| $tabstrip-content-padding-y | $tabstrip-item-padding-y | ||
Description Vertical padding of tabstrip content | |||
| $tabstrip-content-border-width | $tabstrip-border-width | ||
Description Width of border around tabstrip content | |||
| $tabstrip-content-bg | $component-bg | ||
Description Background color of tabstrip content | |||
| $tabstrip-content-text | $component-text | ||
Description Text color of tabstrip content | |||
| $tabstrip-content-border | $component-border | contrast-wcag( $component-bg, $gray-300, $gray-700 ) | |
Description Border color of tabstrip content | |||
| $tabstrip-content-border-focused | $component-text | ||
Description Border color of tabstrip focused content | |||
Toolbar
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $toolbar-padding-x | map-get( $spacing, 2 ) | map-get( $spacing, 2 ) | |
Description The horizontal padding of the container. | |||
| $toolbar-padding-y | map-get( $spacing, 2 ) | map-get( $spacing, 2 ) | |
Description The vertical padding of the container. | |||
Typography
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $enable-typography | false | false | |
Description Global typography styles for the Kendo Bootstrap theme. | |||
| $font-size | $font-size-base | ||
Description Base font size across all components. | |||
| $font-family | $font-family-sans-serif | ||
Description Font family across all components. | |||
| $font-family-monospace | $font-family-monospace | $font-family-monospace | |
Description Font family for monospaced text. Used for styling the code. | |||
| $line-height | $line-height-base | ||
Description Line height used along with $font-size. | |||
