foundation · theme

Mado UI theme

Semantic light, dark and forced-colors design tokens.

Install with npx @madojs/ui@latest add theme.

Foundation

Semantic OKLCH tokens adapt to light, dark and forced-colors preferences without prescribing application-specific states.

Composition

Import the theme once, place data-mado-ui-theme on an application-owned root, and let copied recipes consume the semantic color, spacing, radius, shadow and focus tokens.
Light is the default token set; dark is an explicit value and forced-colors replaces authored colors with browser system colors.

attribute data-mado-ui-theme: Selects the light or dark semantic token set on the containing application root.
css-property --mado-ui-color-*: Semantic canvas, surface, text, border, action and status color tokens authored in OKLCH.
css-property --mado-ui-space-*: Shared spacing scale used as a fallback by primitives, blocks and templates.
css-property --mado-ui-focus-ring: Shared visible focus-ring shadow; forced-colors recipes replace it with system outlines.

The theme changes presentation only: document semantics, accessible names and state remain owned by the rendered HTML.
Forced-colors rules preserve system color choices instead of forcing OKLCH values over user preferences.

The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

The theme supplies a shared focus token but never moves focus or makes a non-interactive element focusable.

Without the theme, every dependent recipe retains local fallback values and the native document remains usable.

None. This item is standalone.

None. This item is standalone.

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.