Customizing Color System

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$primaryColormaterial-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-contrastColormaterial-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.
$secondaryColormaterial-color( $secondary-palette, default )material-color( $secondary-palette, default )
Description
The secondary color of the theme.
$secondary-contrastColormaterial-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.
$tertiaryColormaterial-color($tertiary-palette, default)material-color($tertiary-palette, default)
Description
The tertiary color of the theme.
$tertiary-contrastColormaterial-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.
$infoColor#0058e9#0058e9
Description
The color for informational messages and states.
$successColor#37b400#37b400
Description
The color for success messages and states.
$warningColor#ffc000#ffc000
Description
The color for warning messages and states.
$errorColor#f31700#f31700
Description
The color for error messages and states.
$darkColorget-base-hue( grey, 800 )get-base-hue( grey, 800 )
Description
The dark color of the theme.
$lightColorget-base-hue( grey, 100 )get-base-hue( grey, 100 )
Description
The light color of the theme.
$inverseif( $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

In this article

Not finding the help you need?