Customizing Color System
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $primary | Color | material-color( $primary-palette, default ) | material-color( $primary-palette, default ) |
Description The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme. | |||
| $primary-contrast | Color | material-color( $primary-palette, default-contrast ) | material-color( $primary-palette, default-contrast ) |
Description The color used along with the primary color denoted by $primary. Used to provide contrast between the background and foreground colors. | |||
| $secondary | Color | material-color( $secondary-palette, default ) | material-color( $secondary-palette, default ) |
Description The secondary color of the theme. | |||
| $secondary-contrast | Color | material-color( $secondary-palette, default-contrast ) | material-color( $secondary-palette, default-contrast ) |
Description The color used along with the secondary color denoted by $secondary. Used to provide contrast between the background and foreground colors. | |||
| $tertiary | Color | material-color($tertiary-palette, default) | material-color($tertiary-palette, default) |
Description The tertiary color of the theme. | |||
| $tertiary-contrast | Color | material-color($tertiary-palette, default-contrast) | material-color($tertiary-palette, default-contrast) |
Description The color used along with the tertiary color denoted by $tertiary. Used to provide contrast between the background and foreground colors. | |||
| $info | Color | #0058e9 | #0058e9 |
Description The color for informational messages and states. | |||
| $success | Color | #37b400 | #37b400 |
Description The color for success messages and states. | |||
| $warning | Color | #ffc000 | #ffc000 |
Description The color for warning messages and states. | |||
| $error | Color | #f31700 | #f31700 |
Description The color for error messages and states. | |||
| $dark | Color | get-base-hue( grey, 800 ) | get-base-hue( grey, 800 ) |
Description The dark color of the theme. | |||
| $light | Color | get-base-hue( grey, 100 ) | get-base-hue( grey, 100 ) |
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 | |||
