Customizing Color System
The following table lists the available variables for customization.
Name | Type | Default value | Computed value |
---|---|---|---|
$accent | Color |
|
|
Deprecated Will be removed in v5. Use `$primary` variable instead. Description The color that focuses the user attention. | |||
$accent-contrast | Color |
|
|
Deprecated Will be removed in v5. Use `$primary-contrast` variable instead. Description The color used along with the accent color denoted by $primary. | |||
$primary | Color |
|
|
Description The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme. | |||
$primary-contrast | Color |
|
|
Description The color used along with the accent color denoted by $primary. Used to provide contrast between the background and foreground colors. | |||
$secondary | Color |
|
|
Description The secondary color of the theme. | |||
$secondary-contrast | Color |
|
|
Description The color used along with the secondary color denoted by $secondary. Used to provide contrast between the background and foreground colors. | |||
$tertiary | Color |
|
|
Description The tertiary color of the theme. | |||
$tertiary-contrast | Color |
|
|
Description The color used along with the tertiary color denoted by $tertiary. Used to provide contrast between the background and foreground colors. | |||
$info | Color |
|
|
Description The color for informational messages and states. | |||
$success | Color |
|
|
Description The color for success messages and states. | |||
$warning | Color |
|
|
Description The color for warning messages and states. | |||
$error | Color |
|
|
Description The color for error messages and states. | |||
$dark | Color |
|
|
Description The dark color of the theme. | |||
$light | Color |
|
|
Description The light color of the theme. | |||
$inverse | Color |
|
|
Description Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark |