Color

Color

By default the color scheme is selected according to prefers-color-scheme.

Light

Primary
On Primary
Primary Container
On Primary Container
Secondary
On Secondary
Secondary Container
On Secondary Container
Tertiary
On Tertiary
Tertiary Container
On Tertiary Container
Error
On Error
Error Container
On Error Container
Background
On Background
Surface
On Surface
Surface Variant
On Surface Variant
Outline

Dark

Primary
On Primary
Primary Container
On Primary Container
Secondary
On Secondary
Secondary Container
On Secondary Container
Tertiary
On Tertiary
Tertiary Container
On Tertiary Container
Error
On Error
Error Container
On Error Container
Background
On Background
Surface
On Surface
Surface Variant
On Surface Variant
Outline

ClassName

Use .light-scheme or .dark-scheme to specify mode:

<div class="light-scheme padding-3 background">
  <button type="button" class="button button--filled">Button</button>
</div>
<div class="dark-scheme padding-3 background">
  <button type="button" class="button button--filled">Button</button>
</div>

Mixin (SCSS)

Generate custom color scheme:

:root {
  @include color-scheme(
    $primary: #3A691E,
    $secondary: #56624D,
    $tertiary: #1E686A,
    $neutral: #596B86,
    $neutral-variant: #596B86,
    $error: #B12825
  );
}

It will generate light and dark scheme.

In addition, light or dark themes can be generated separately.

.my-light-scheme {
  @include light-scheme(
    $primary: #3A691E,
    $secondary: #56624D,
    $tertiary: #1E686A,
    $neutral: #596B86,
    $neutral-variant: #596B86,
    $error: #B12825
  );
}

.my-dark-scheme {
  @include dark-scheme(
    $primary: #3A691E,
    $secondary: #56624D,
    $tertiary: #1E686A,
    $neutral: #596B86,
    $neutral-variant: #596B86,
    $error: #B12825
  );
}