Dark mode
Light and dark themes switch with one `data-theme` attribute on `<html>`: the palettes are scoped to it, so there is no reload and no flash.
Fragiola supports light and dark themes via data-theme on the <html>
element. The palette custom properties are scoped to
:root[data-theme="light"] and :root[data-theme="dark"], so switching is a
single attribute change — no reload, no flash.
No flash on first paint
Theme switching is handled by next-themes via Fumadocs' RootProvider. The
provider is configured in app/layout.tsx to emit both the .dark class
(for Fumadocs UI's own styles) and data-theme="light"|"dark" (for Fragiola's
palette files). next-themes injects its no-flash script before first paint,
falling back to prefers-color-scheme when no stored choice exists.
What changes
In dark mode, the inline axis inverts: hover lightens instead of darkening
(--palette-state-shift flips from -0.1 to +0.1), and soft becomes a
dark saturated tone instead of a light pastel. The roles are the same; only
the values follow the theme.
Switching at runtime
Fumadocs' built-in theme toggle (in the docs header) switches between light
and dark. The choice persists across refreshes via next-themes.
Composition
How components compose: `render` instead of `asChild`, one wrapper for identical parts, the body on the field frame, one export per component.
RTL
RTL is an MVP goal: logical properties on the inline axis (`ps`/`pe`, `border-s`/`border-e`, `start`/`end`), while the block axis stays physical.