All Components

Customization

The following list describes the theme variables available for adjustment in the Kendo UI Bootstrap theme for Angular.

Variables

Common

Name Default value Description
$font-size $font-size-base Base font size across all components.
$font-family $font-family-base Font family across all components.
$font-family-monospace $font-family-monospace Font family for monospaced text. Used for styling the code.
$line-height $line-height-base Line height used along with $font-size.
$border-radius $border-radius Border radius for all components.
$accent $component-active-bg The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$accent-contrast $component-active-color The color used along with the accent color denoted by $accent.
Used to provide contrast between the background and foreground colors.
$base-text $btn-secondary-color The text color of the components' chrome area.
$base-bg $btn-secondary-bg The background of the components' chrome area.
$base-border darken( $base-bg, 12% ) The border color of the components' chrome area.
$base-gradient none The gradient background of the components' chrome area.
$hovered-text $base-text The text color of hovered items.
$hovered-bg darken( $base-bg, 3% ) The background of hovered items.
$hovered-border darken( $base-border, 12% ) The border color of hovered items.
$hovered-gradient none The gradient background of hovered items.
$selected-text $accent-contrast The text color of selected items.
$selected-bg $accent The background of selected items.
$selected-border darken( $selected-bg, 12% ) The border color of selected items.
$selected-gradient none The gradient background of selected items.
$success $brand-success The color for error messages and states.
$info $brand-info The color for warning messages and states.
$warning $brand-warning The color for success messages and states.
$error $brand-danger The color for informational messages and states.

Buttons

Name Default value Description
$button-text $base-text The text color of the buttons.
$button-bg $base-bg The background of the buttons.
$button-border darken( $base-border, 8 ) The border color of the buttons.
$button-gradient none The background gradient of the buttons.
$button-hovered-text $button-text The text color of hovered buttons.
$button-hovered-bg darken( $button-bg, 10% ) The background of hovered buttons.
$button-hovered-border darken( $button-border, 12% ) The border color of hovered buttons.
$button-hovered-gradient none The background gradient of hovered buttons.
$button-pressed-text $button-hovered-text The text color of pressed buttons.
$button-pressed-bg $button-hovered-bg The background color of pressed buttons.
$button-pressed-border $button-hovered-border The border color of pressed buttons.
$button-pressed-gradient none The background gradient of pressed buttons.
$button-focused-shadow 0 0 0 2px rgba($button-border, .5) The shadow of focused buttons.

Charts

Name Default value Description
$series-a #0275d8 The color of the first series.
$series-b #5bc0de The color of the second series.
$series-c #5cb85c The color of the third series.
$series-d #f0ad4e The color of the fourth series.
$series-e #e67d4a The color of the fifth series.
$series-f #d9534f The color of the sixth series.
$chart-major-lines rgba(0, 0, 0, .08) The color of the Chart grid lines (major).
$chart-minor-lines rgba(0, 0, 0, .04) The color of the Chart grid lines (minor).

Toolbar

Name Default value Description
$toolbar-padding-x $table-cell-padding / 2 The horizontal padding of the container.
$toolbar-padding-y $table-cell-padding / 2 The vertical padding of the container.

Mixins

In this article