Theming guide

Orbit components read design tokens, never hard-coded values. Override the tokens and the whole library re-themes.

Schemes

Override the source

:root {
  --md-primary: #006a6a;
  --md-on-primary: #ffffff;
  --md-primary-container: #9cf1f0;
  --md-on-primary-container: #002020;
}
@media (prefers-color-scheme: dark) {
  :root { --md-primary: #4ddadt; /* ... */ }
}

Dynamic color

Generate a full role set from a single source color with the token pipeline in the token bundle: it emits light and dark role maps, contrast-checked pairs and per-component overrides.