Name	Type	Default value	Computed value
$accent	Color	`$primary`	`#0d6efd`
Deprecated Will be removed in v5. Use `$primary` variable instead. Description The color that focuses the user attention.
$accent-contrast	Color	`contrast-wcag( $accent )`	`white`
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`	`#0d6efd`
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 )`	`white`
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`	`#6c757d`
Description The secondary color of the theme.
$secondary-contrast	Color	`contrast-wcag( $secondary )`	`white`
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`	`#6f42c1`
Description The tertiary color of the theme.
$tertiary-contrast	Color	`contrast-wcag( $tertiary )`	`white`
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`	`#0dcaf0`
Description The color for informational messages and states.
$success	Color	`$success`	`#198754`
Description The color for success messages and states.
$warning	Color	`$warning`	`#ffc107`
Description The color for warning messages and states.
$error	Color	`$danger`	`#dc3545`
Description The color for error messages and states.
$dark	Color	`$dark`	`#212529`
Description The dark color of the theme.
$light	Color	`$light`	`#f8f9fa`
Description The light color of the theme.
$inverse	Color	`if( $dark-theme, $light, $dark )`	`#212529`
Description Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark

Customizing Color System

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community