Theming

Install one semantic foundation

Components resolve the theme when needed, or it can be installed directly. Import the copied file once from the application entry using the configured styles path.

npx @madojs/ui@latest add theme

import "./styles/mado-ui-theme.css";

Light tokens apply at :root. Set data-mado-ui-theme="light" or data-mado-ui-theme="dark" on an application-owned root when the choice must be explicit or scoped.

Override semantic tokens

Public --mado-ui-* properties cover canvas, surfaces, text, borders, actions, status tones, spacing, radius, shadows and focus. Colors are authored in OKLCH so light and dark ramps can be tuned perceptually.

:root {
  --mado-ui-color-action: oklch(0.55 0.18 265);
  --mado-ui-radius-md: 0.875rem;
}

[data-mado-ui-theme="dark"] {
  --mado-ui-color-action: oklch(0.82 0.09 265);
}

Registry recipes live in the low-priority mado-ui cascade layer and use :where(). Ordinary unlayered application CSS can therefore override public tokens and selectors without specificity escalation. Names beginning with --_ are recipe internals, not a public contract.

Preserve user preferences

The theme declares the matching color-scheme. In forced-colors mode it replaces authored colors with browser system color keywords. Component recipes supply their own system-color focus and border adjustments.

Motion recipes honor prefers-reduced-motion, while static HTML and local fallback values keep copied components usable if the theme is absent. Theme selection changes presentation only; semantics, accessible names and focus stay owned by native HTML and application code.