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
|
|||