Color
By default the color scheme is selected according to prefers-color-scheme
.
Light
Primary Container
on Primary Container
Secondary Container
on Secondary Container
Tertiary Container
on Teriary Container
Error Container
on Error Container
Surface Container Highest
Dark
Primary Container
on Primary Container
Secondary Container
on Secondary Container
Tertiary Container
on Teriary Container
Error Container
on Error Container
Surface Container Highest
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>