Theme switchPro
A day / night switch: the sun sets into a moon and the stars come out.
This card follows the switch: day.
When to use
- Playful light / dark toggles on marketing sites and personal apps.
When not to use
- When you also need a System option: use a menu like the site's theme toggle.
Installation
Usage
Import it from @/components/ui/theme-switch after installing.
example.tsx
import { ThemeSwitch } from "@/components/ui/theme-switch";
<ThemeSwitch checked={theme === "dark"} onCheckedChange={(dark) => setTheme(dark ? "dark" : "light")} />API reference
ThemeSwitch
A switch drawn as a sky with a sun that becomes the moon.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked / defaultChecked / onCheckedChange | boolean | – | true is dark. |
| size | "sm" | "md" | "md" | 72 × 36 or 58 × 29 px. |
Keyboard interactions
| Keys | Action |
|---|---|
| SpaceorEnter | Toggle |
Accessibility
- role="switch" named "Dark mode" with aria-checked.
Motion
- The sky fades, the sun slides and rolls into the moon, clouds sink and stars twinkle in.
Responsive behavior
- Fixed size.
Performance
- A handful of transformed spans.
Notes for AI
- It only reports the choice; apply the theme yourself in onCheckedChange.
This page as Markdown, for assistants and coding agents:
/components/theme-switch/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt