# Theme Switch

Switches between light and dark. The sun folds into the moon as the theme spreads.

Tier: Free

## Installation

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

## Usage

```tsx
import { ThemeSwitch } from '@/components/fetaui/theme-switch'

export function Example() {
  return <ThemeSwitch onValueChange={setTheme} />
}
```

## API

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

## When to use

- As the one theme control in a header or a settings row.

## When not to use

- For three or more themes: use Select.

## Accessibility

- The label names the theme it will switch to.
- The icon is decorative.

## Motion

- The icon rotates 90 degrees with the out easing.
- The new theme spreads from the button with a view transition.
- With reduced motion, the theme changes at once.