The following table lists the available variables for customizing the Bootstrap theme.
| Name |
Default value |
Description |
| $border-radius |
$border-radius
|
Border radius for all components.
|
| $base-bg |
try-darken( $component-bg, 3% )
|
The background of the components' chrome area.
|
| $base-text |
$component-color
|
The text color of the components' chrome area.
|
| $base-border |
try-darken( $base-bg, 3% )
|
The border color of the components' chrome area.
|
| $base-gradient |
false
|
The gradient background of the components' chrome area.
|
| $hovered-bg |
try-darken( $base-bg, 3% )
|
The background of hovered items.
|
| $hovered-text |
$base-text
|
The text color of hovered items.
|
| $hovered-border |
try-darken( $base-border, 12% )
|
The border color of hovered items.
|
| $hovered-gradient |
false
|
The gradient background of hovered items.
|
| $selected-bg |
$accent
|
The background of selected items.
|
| $selected-text |
contrast-wcag( $selected-bg )
|
The text color of selected items.
|
| $selected-border |
try-darken( $selected-bg, 12% )
|
The border color of selected items.
|
| $selected-gradient |
false
|
The gradient background of selected items.
|
| Name |
Default value |
Description |
| $button-bg |
$secondary
|
The background of the buttons.
|
| $button-text |
contrast-wcag( $button-bg, $gray-900 )
|
The text color of the buttons.
|
| $button-border |
$button-bg
|
The border color of the buttons.
|
| $button-gradient |
false
|
The background gradient of the buttons.
|
| $button-hovered-bg |
try-darken( $button-bg, 7.5% )
|
The background of hovered buttons.
|
| $button-hovered-text |
contrast-wcag( $button-hovered-bg, $gray-900 )
|
The text color of hovered buttons.
|
| $button-hovered-border |
try-darken( $button-border, 10% )
|
The border color of hovered buttons.
|
| $button-hovered-gradient |
false
|
The background gradient of hovered buttons.
|
| $button-pressed-bg |
try-darken( $button-bg, 10% )
|
The background color of pressed buttons.
|
| $button-pressed-text |
contrast-wcag( $button-pressed-bg, $gray-900 )
|
The text color of pressed buttons.
|
| $button-pressed-border |
try-darken( $button-border, 12.5% )
|
The border color of pressed buttons.
|
| $button-pressed-gradient |
false
|
The background gradient of pressed buttons.
|
| $button-focused-shadow |
0 0 0 3px rgba($button-border, .5)
|
The shadow of focused buttons.
|
| Name |
Default value |
Description |
| $accent |
$primary
|
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
|
| $accent-contrast |
contrast-wcag( $accent )
|
The color used along with the accent color denoted by $accent.
Used to provide contrast between the background and foreground colors.
|
| $success |
$success
|
The color for error messages and states.
|
| $info |
$info
|
The color for warning messages and states.
|
| $warning |
$warning
|
The color for success messages and states.
|
| $error |
$danger
|
The color for informational messages and states.
|
| $color-level-step |
$theme-color-interval
|
Set a specific jump point for requesting color jumps
|
| $yiq-threshold |
$yiq-contrasted-threshold
|
The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
|
| $yiq-dark |
$yiq-text-dark
|
Dark color for use in YIQ color contrast function.
|
| $yiq-light |
$yiq-text-light
|
Light color for use in YIQ color contrast function.
|