Themes and multi-brand

Modes

Each system ships light and dark themes by default, and high contrast is available. Every theme is checked for contrast before delivery.

Multiple brands

Brands share components and semantic tokens and differ only in the primitives each semantic token references, plus radius and type choices. Components stay identical across Fernlight and Atlas; only the theme file changes.

Switching at runtime

import '@fernlight/ds/themes/light.css';
import '@fernlight/ds/themes/dark.css';

<html data-theme="dark">…</html>

Themes are CSS custom properties scoped to data-theme, so switching costs one attribute change.