Docs / Dark Mode
One attribute flips every part.
Put data-theme="dark" on the root element — or on any container — and every part inside flips. The tokens carry both themes; parts do not know which one they are in:
<section data-theme="dark"> …parts… </section>
The Light/Dark toggle on every component page is this attribute, applied to the preview stage.
Backgrounds, ink, lines, tracks and the accent ink (brighter in the dark) are theme tokens. The zinc scale underneath stays the same family, so a dark page still reads as the same product.
There is no automatic prefers-color-scheme switch built in: which theme a page wears is the page’s decision. Setting the attribute from a media query in your own CSS is one line.
Getting Started · Theming · Accessibility · Installation · JavaScript · Guide: Building a Dashboard · Guide: Building a Settings Page · Guide: Building a Pricing Page · Guide: Sign-in & Account Pages · Why Vanilla · The Mold · Anatomy of a Part · Coming from Tailwind · FAQ · Changelog