Dark mode

Dark Mode

The data-theme attribute on the root element selects the theme. Semantic tokens replace their values inside the dark scope, so components do not need duplicated dark: classes.

Switch themes live

The same control used in the header reveals the next theme with View Transitions.

Switch the theme for the entire documentation site

Scoped themes

Because dark tokens are bound to data-theme, any subtree can select its own theme. These cards always show light and dark side by side.

Light

Card title

Secondary copy uses color-muted.

Primary actionSecondary action

Dark

Card title

Secondary copy uses color-muted.

Primary actionSecondary action

No flash of the wrong theme

A first-paint script sets data-theme before React hydration from the saved preference or system setting. A matching color-scheme keeps native scrollbars and overscroll surfaces correct too.

Switch themes in code

Read or write the active theme imperatively from anywhere.

// Read
document.documentElement.dataset.theme; // "light" | "dark"

// Write; useTheme or the toggler handles persistence
document.documentElement.dataset.theme = "dark";