Color

Color

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

Light

Primary
on Primary
Secondary
on Secondary
Tertiary
on Teriary
Error
on Error
Primary Container
on Primary Container
Secondary Container
on Secondary Container
Tertiary Container
on Teriary Container
Error Container
on Error Container
Surface Dim
Surface
Surface Bright
Surface Container Lowest
Surface Container Low
Surface Container
Surface Container High
Surface Container Highest
On Surface
On Surface Variant
Outline
Outline Variant

Dark

Primary
on Primary
Secondary
on Secondary
Tertiary
on Teriary
Error
on Error
Primary Container
on Primary Container
Secondary Container
on Secondary Container
Tertiary Container
on Teriary Container
Error Container
on Error Container
Surface Dim
Surface
Surface Bright
Surface Container Lowest
Surface Container Low
Surface Container
Surface Container High
Surface Container Highest
On Surface
On Surface Variant
Outline
Outline Variant

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
  );
}