Customizing Color System

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$accentColor

#ff6358

#ff6358

Deprecated
Will be removed in v5. Use `$primary` variable instead.
Description
The color that focuses the user attention.
$accent-contrastColor

contrast-wcag( $accent )

white

Deprecated
Will be removed in v5. Use `$primary-contrast` variable instead.
Description
The color used along with the accent color denoted by $primary.
$primaryColor

#ff6358

#ff6358

Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrastColor

contrast-wcag( $primary )

white

Description
The color used along with the accent color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondaryColor

#666666

#666666

Description
The secondary color of the theme.
$secondary-contrastColor

contrast-wcag( $secondary )

white

Description
The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors.
$tertiaryColor

#03a9f4

#03a9f4

Description
The tertiary color of the theme.
$tertiary-contrastColor

contrast-wcag( $tertiary )

white

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.
$darkColor

#424242

#424242

Description
The dark color of the theme.
$lightColor

#ebebeb

#ebebeb

Description
The light color of the theme.
$inverseColor

if( $dark-theme, $light, $dark )

#424242

Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark

In this article

Not finding the help you need?