Customizing Color System

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$accentColor

$primary

#0d6efd

Deprecated
Will be removed in v5. Use `$primary` variable instead.
Description
The color that focuses the user attention.
$accent-contrastColor

k-contrast-color( $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.
$primaryColor

$primary

#0d6efd

Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrastColor

k-contrast-color( $primary )

white

Description
The color used along with the primary color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondaryColor

$secondary

#6c757d

Description
The secondary color of the theme.
$secondary-contrastColor

k-contrast-color( $secondary )

white

Description
The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors.
$tertiaryColor

$purple

#6f42c1

Description
The tertiary color of the theme.
$tertiary-contrastColor

k-contrast-color( $tertiary )

white

Description
The color used along with the tertiary color denoted by $tertiary.
Used to provide contrast between the background and foreground colors.
$infoColor

$info

#0dcaf0

Description
The color for informational messages and states.
$successColor

$success

#198754

Description
The color for success messages and states.
$warningColor

$warning

#ffc107

Description
The color for warning messages and states.
$errorColor

$danger

#dc3545

Description
The color for error messages and states.
$darkColor

$dark

#212529

Description
The dark color of the theme.
$lightColor

$light

#f8f9fa

Description
The light color of the theme.
$inverseColor

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

In this article

Not finding the help you need?