Customizing Color System

The following table lists the available variables for customization.

Name Type Default value Computed value
$accent Color $primary $accent
Deprecated
Will be removed in v5. Use `$primary` variable instead.
Description
The color that focuses the user attention.
$accent-contrast Color contrast-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.
$primary Color $accent $accent
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrast Color $accent-contrast contrast-wcag( $accent )
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 $secondary
Description
The secondary color of the theme.
$secondary-contrast Color contrast-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.
$tertiary Color $purple
Description
The tertiary color of the theme.
$tertiary-contrast Color contrast-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.
$info Color $info $info
Description
The color for informational messages and states.
$success Color $success $success
Description
The color for success messages and states.
$warning Color $warning $warning
Description
The color for warning messages and states.
$error Color $danger
Description
The color for error messages and states.
$dark Color $dark $dark
Description
The dark color of the theme.
$light Color $light $light
Description
The light color of the theme.
$inverse if( $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