Theming

Every token is a CSS variable, so a Material You scheme is an override away.

Color roles

The baseline M3 scheme ships with paired container / on-container roles. Use them as Tailwind colors: bg-primary, text-on-surface-variant, bg-surface-high.

primary

primary-container

secondary-container

tertiary-container

error

surface-container

Dynamic color

Generate a scheme from your brand color with the Material Theme Builder, then override the variables — components re-tint automatically:

:root {
  --primary: #006a60;
  --on-primary: #ffffff;
  --primary-container: #9ef2e4;
  --on-primary-container: #005048;
}

Dark scheme

Toggle the dark class on <html>. All tokens swap to their dark values — components need no changes.

Type, shape, elevation

The full M3 type scale ships as utilities (text-display-l … text-label-s), shape as radius tokens, elevation as shadows, and state layers as 8% hover / 12% press utilities.