Browse components
Theme Toggle
A day/night switch: the sun rolls across, its rays retract as a shadow bites it into a crescent, clouds drift off and stars burst out and twinkle.
Installation
npx shadcn@latest add @glint-ui/theme-toggleFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/theme-toggle.json
Usage
import { ThemeToggle } from "@/components/ui/theme-toggle";
const { resolvedTheme, setTheme } = useTheme();
<ThemeToggle
checked={resolvedTheme === "dark"}
onChange={(dark) => setTheme(dark ? "dark" : "light")}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 32 | Track height in px; width is double. |
| label | string | "Dark mode" | Accessible label of the switch. |
| defaultChecked | boolean | false | Start in dark mode (uncontrolled). |
| checked | ReactNode | — | Controlled state, true = dark. Pair with onChange(dark). |
| className | string | — | Extra classes for the root element. |