# Theme Toggle

Light and dark mode toggle with a drawn sun that turns into a crescent moon. Comes as an icon, pill or switch, and passes on where you tapped so your app can flood the new theme out from the button.

> Primitive · Free · Mobile-Native — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add theme-toggle
```

## Import

```tsx
import { ThemeToggle } from "@/components/ui/theme-toggle/theme-toggle";
```

## Variants

- `icon` — Icon: `npx @lumioui/cli add theme-toggle-icon`
- `pill` — Pill: `npx @lumioui/cli add theme-toggle-pill`
- `switch` — Switch: `npx @lumioui/cli add theme-toggle-switch`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `ThemeToggleVariant` | Visual style. Default "icon". |
| `scheme?` | `ThemeScheme` | Controlled scheme. Default: the ThemeProvider's scheme. |
| `onSchemeChange?` | `(next: ThemeScheme, event: GestureResponderEvent) => void` | Called with the next scheme and the press — use it to flood the new  scheme out of the toggle. When set, the toggle does not change the  ThemeProvider override itself. |
| `accessibilityLabel?` | `string` | Accessible label. Default announces the action — "Switch to light theme" / "Switch to dark theme" based on current state. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/theme-toggle