Theming

One semantic system that resolves cleanly in light and dark mode.

The same component markup serves light and dark mode. Semantic tokens change their resolved value; component meaning and hierarchy stay stable.

Theme-aware surface

Every role resolves from semantic CSS tokens.

Ready

Use bg-background, text-foreground, text-muted-foreground, and the component variants. Avoid pairing dark: overrides with a semantic token unless the meaning truly changes.

The application theme provider owns the .dark class and system preference. Components should not read or store the theme just to choose colours. If JavaScript needs a resolved token for a canvas or third-party renderer, read it with getComputedStyle after the theme changes.

<div className="bg-card text-card-foreground shadow-border">
  <p className="text-muted-foreground">Adapts without alternate markup.</p>
</div>