Customizing Color System

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$accentColor$primary$accent
Deprecated
Will be removed in v5. Use `$primary` variable instead.
Description
The color that focuses the user attention.
$accent-contrastColorcontrast-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.
$primaryColor$accent$accent
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrastColor$accent-contrastcontrast-wcag( $accent )
Description
The color used along with the primary color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondaryColor$secondary$secondary
Description
The secondary color of the theme.
$secondary-contrastColorcontrast-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.
$tertiaryColor$purple
Description
The tertiary color of the theme.
$tertiary-contrastColorcontrast-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.
$infoColor$info$info
Description
The color for informational messages and states.
$successColor$success$success
Description
The color for success messages and states.
$warningColor$warning$warning
Description
The color for warning messages and states.
$errorColor$danger
Description
The color for error messages and states.
$darkColor$dark$dark
Description
The dark color of the theme.
$lightColor$light$light
Description
The light color of the theme.
$inverseif( $is-dark-theme, $light, $dark )if( $is-dark-theme, $light, $dark )
Description
Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark

In this article

Not finding the help you need?