ns-ui
A light/dark toggle whose chip reads the real resolved --background/--foreground values at mount and on every theme change and paints itself in their negative, so it previews almost exactly what the page will look like the instant you click it.
Install
npx shadcn add https://design.helpmarq.comns-ui / toggle-theme-ascii
The chip is painted in the negative of the current theme's real token colors — it previews almost exactly what the page will look like the instant you click it.
| Prop | Type | Default | Description |
|---|---|---|---|
| dark? | boolean | — | controlled dark state; omit for uncontrolled (reads/writes <html class="dark">) |
| defaultDark? | boolean | — | — |
| onDarkChange? | (dark: boolean) => void | — | — |
| syncDocument? | boolean | — | whether clicking mutates document.documentElement's "dark" class + localStorage |
| storageKey? | string | — | localStorage key used when syncDocument is true |
| className? | string | — | — |