Components › Actions
Theme toggle
Switch light and dark: a sliding switch, a three-way segmented control with system, or one icon button.
Installation
npx plankui@latest add theme-toggleUsage
import { ThemeToggle } from "@/components/ui/theme-toggle";
<ThemeToggle value={mode} onValueChange={(m, e) => setMode(m)} variant="switch" />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | "light" | "dark" | "system" | "light" | Current mode. |
| onValueChange | (mode, event) => void | The click event lets you start a reveal from the pointer. | |
| variant | "switch" | "segmented" | "icon" | "switch" | Shape of the control. |