## Theme Toggle (S—112)

A sun / moon button whose rays retract and a crescent bites in as it switches; a three-way variant adds System.

- URL: https://sundaeui.dev/components/theme-toggle
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/theme-toggle.json`
- Tags: moon, sun, dark-mode, theme, toggle, icon-morph

One SVG morphs between states: the sun’s rays scale in and out while a circle mask slides across to cut the crescent. No icon swap, no flash.
The segmented variant offers Light / System / Dark with the same sliding indicator used elsewhere in the kit.

### Usage

```tsx
import { ThemeToggle } from '@/components/sundae/theme-toggle'

<ThemeToggle />
```

### Props

- `value / defaultValue` (`'light' | 'dark' | 'system'`): Theme.
- `onValueChange` (`(t) => void`): Called on change.
- `variant` (`'icon' | 'segmented'`, default `'icon'`): Single button or three-way.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Site headers, settings, docs.

### When not to use

- Apps that follow the OS only.

### Accessibility

- Icon variant: a button with aria-label describing the action (“Switch to dark theme”).
- Segmented variant: a radiogroup with labelled options.
- Reduced motion removes the movement and keeps every state change.