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 .dark to specify dark mode:

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