# Theme Switcher

A three-way toggle for switching between system, light, and dark color themes. Sets the `data-vesper-theme` attribute on the document element to control the active theme.

```tsx demo
import { ThemeSwitcher } from "@tenstorrent/vesper/theme-switcher";

export default function ThemeSwitcherDemo() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--vesper-spacing-2)",
      }}
    >
      <ThemeSwitcher size="lg" />
      <ThemeSwitcher size="sm" />
    </div>
  );
}
```

## Options

| Prop   | Type           | Description                     | Default |
| ------ | -------------- | ------------------------------- | ------- |
| `size` | `"sm" \| "lg"` | The size of the theme switcher. | `"lg"`  |

## Examples

Render a `ThemeSwitcher` without any props. By default it renders at `lg` size:

```tsx demo
import { ThemeSwitcher } from "@tenstorrent/vesper/theme-switcher";

export default function BasicThemeSwitcher() {
  return <ThemeSwitcher />;
}
```

To specify a size, pass `size="sm"` or `size="lg"`:

```tsx demo
import { ThemeSwitcher } from "@tenstorrent/vesper/theme-switcher";

export default function ThemeSwitcherSizes() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--vesper-spacing-2)",
      }}
    >
      <ThemeSwitcher size="sm" />
      <ThemeSwitcher size="lg" />
    </div>
  );
}
```