# Theme Toggle

A light and dark switch that shows a sun or a moon, so the value reads at a glance.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/theme-toggle
```

## Usage

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

export function Example() {
  return <ThemeToggle kind="round" onValueChange={setTheme} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| kind | round, labeled, icon | round |
| value | light, dark |  |
| defaultValue | light, dark | light |
| onValueChange | (value) => void |  |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For switching theme in a header or settings.

## When not to use

- For other settings: use Switch.

## Accessibility

- A native button with the switch role.

## Motion

- The new theme spreads as a circle from the button over 550 ms.
- Browsers with no view transitions change the theme at once.
- With reduced motion, the theme changes with no spread.
- Swift crossfades.