Zostel
Site Dark Mode Toggle

Dark Mode Toggle

Day or night — the sun and moon of the Zostel UI icons. It can theme the page, or just one part of it.

Preview

size="default"
Zostel Leh
Climb to the Shanti Stupa. Watch Leh turn gold.
size="sm"
size="lg"

Usage

tsx
import { DarkModeToggle } from "zostel-ui";

<DarkModeToggle />                                    {/* the whole page (<html class="dark">) */}

const panel = useRef<HTMLDivElement>(null);
<div ref={panel} className="bg-background text-foreground">
  <DarkModeToggle target={panel} storageKey={false} /> {/* only this panel */}
</div>

Props

size
Type: "sm" | "default" | "lg"
Default: "default"

A square button.

target
Type: RefObject<HTMLElement>
Default: —

Theme this element instead of <html>.

storageKey
Type: string | false
Default: "zostel-ui-theme"

Where the choice is remembered; false to not remember.

defaultTheme
Type: "light" | "dark" | "system"
Default: "light"

Before a choice is made.

className
Type: string
Default: —

More classes, merged with the component’s own (tailwind-merge).