Customizing Color System

The following table lists the available variables for customization.

NameDefault valueDescription
$accent #ff6358 Deprecated. Will be removed in v5. Use `$primary` variable instead.
$accent-contrast contrast-wcag( $accent ) Deprecated. Will be removed in v5. Use `$primary-contrast` variable instead.
$primary $accent The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrast $accent-contrast The color used along with the accent color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondary #f6f6f6 The secondary color of the theme.
$secondary-contrast contrast-wcag( $secondary ) The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors.
$tertiary #03a9f4 The tertiary color of the theme.
$tertiary-contrast contrast-wcag( $tertiary ) The color used along with the tertiary color denoted by $tertiary.
Used to provide contrast between the background and foreground colors.
$info #0058e9 The color for informational messages and states.
$success #37b400 The color for success messages and states.
$warning #ffc000 The color for warning messages and states.
$error #f31700 The color for error messages and states.
$dark #404040 The dark color of the theme.
$light #ebebeb The light color of the theme.
$inverse if( $is-dark-theme, $light, $dark ) Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark