A sun and moon switch. The thumb morphs between a rayed sun and a crescent while clouds drift out and stars twinkle in.
Appearance
Dark theme is on
Good evening
3 plants due
npx shadcn@latest add https://hyperblur.dev/r/toggle-theme-switch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/toggle-theme-switch.tsx.
import { ToggleThemeSwitch } from "@/components/hyperblur/toggle-theme-switch"
<ToggleThemeSwitch defaultChecked onCheckedChange={(dark) => console.log(dark)} />| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Controlled state. True is the moon (dark mode). Pair with onCheckedChange. | |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | Called with the new state on every toggle. | |
| size | number | 32 | Height of the switch in pixels. The width is twice the height. |
| label | string | "Dark mode" | Accessible name of the switch. |
| accent | string | "#7fb3ff" | Focus ring color. |
| disabled | boolean | false | Disable the switch. |
| name | string | Form field name of the underlying checkbox. |