Customizing Color System
The following table lists the available variables for customization.
| Name | Default value | Description |
|---|---|---|
| $accent | $primary | 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 primary color denoted by $primary. Used to provide contrast between the background and foreground colors. |
| $secondary | $secondary | 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 | $purple | 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 | $info | The color for informational messages and states. |
| $success | $success | The color for success messages and states. |
| $warning | $warning | The color for warning messages and states. |
| $error | $danger | The color for error messages and states. |
| $dark | $dark | The dark color of the theme. |
| $light | $light | 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 |