# AppearanceToggle

Lets people choose light, dark or the system setting.

- **Use it for**: Letting people choose light, dark or system appearance.
- **Not for**: Other settings; it is wired to the theme provider. Try [ToggleGroup](https://unseenui.com/components/toggle-group/), [Switch](https://unseenui.com/components/switch/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { AppearanceToggle } from '@stackunseen/ui';
import { AITheme } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<AppearanceToggle value={appearance} onValueChange={setAppearance} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `string` | Names the segmented group. |
| `labels` | `Partial<Record<Appearance, string>>` |  |
| `onValueChange` (required) | `(next: Appearance) => void` |  |
| `size` | `"default" \| "sm"` |  |
| `value` (required) | `Appearance` |  |
| `variant` | `"switch" \| "segmented" \| "cycle" \| "subtle"` | `cycle`: one button through light, dark and system. |

## Keyboard

The cycle button names the current mode and what a press switches to. Switch and segmented are radiogroups (arrow keys move and select); subtle is one "Dark mode" button with a pressed state.

## Works with

[ToggleGroup](https://unseenui.com/components/toggle-group/), [Chip](https://unseenui.com/components/chip/), [CopyButton](https://unseenui.com/components/copy-button/), [Button](https://unseenui.com/components/button/), [IconButton](https://unseenui.com/components/icon-button/)

Page: https://unseenui.com/components/appearance-toggle/