Dark mode

How dark mode works and how to toggle it.

Mechanism

Dark mode is driven by a data-theme="dark" attribute on the <html> element. All semantic tokens have a paired override rule scoped to [data-theme="dark"] in packages/tokens.

Toggling

// Enable dark mode
document.documentElement.setAttribute("data-theme", "dark");

// Disable dark mode
document.documentElement.removeAttribute("data-theme");

Safe raw classes

Some classes are intentionally mode-independent (e.g. a solid destructive fill, an alpha focus ring). Mark these with a dark-ok comment on the same line to silence the lint check:

className="bg-error-600 dark-ok"

Adding new dark values

If no existing semantic token fits your need, add a new flipping token in packages/tokens — both the :root light value and the [data-theme="dark"] override. Never reach for a raw scale to work around a missing token.