# Theme switch

> A day / night switch: the sun sets into a moon and the stars come out.

Component · Pro · https://lodeui.com/components/theme-switch

## 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

```bash
npx shadcn@latest add @lode/theme-switch
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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 |
| --- | --- |
| Space / Enter | 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.

## Related

- [Switch](https://lodeui.com/components/switch) — A toggle whose thumb stretches as you press it.
- [Toggle group](https://lodeui.com/components/toggle-group) — A row of toggle buttons for one choice (alignment) or several (bold, italic), with a sliding pill.