# Theme Toggle
```astro
---
import { ThemeToggle } from "@/components/starwind/theme-toggle";
---
```
## Installation
```bash
npx starwind@latest add theme-toggle
```
## Usage
### General Notes
The Theme Toggle component provides a simple way to switch between light and dark themes. It uses the Toggle component internally and syncs with `localStorage` to persist the user's preference.
**Important:** Add the following script to the `` of each page to prevent flash of incorrect theme on page load:
```astro
```
### Custom Icons
Use the `light-icon` and `dark-icon` slots to customize the icons displayed for each theme state.
```astro
---
import { ThemeToggle } from "@/components/starwind/theme-toggle";
import Heart from "@tabler/icons/outline/heart.svg";
import Star from "@tabler/icons/outline/star.svg";
---
```
**Note:** Custom icons must include the `data-theme-icon` attribute and the visibility classes shown above to work correctly with the theme toggle's state management.
## API Reference
### ThemeToggle
A toggle button that switches between light and dark themes.
| Prop | Type | Default |
|------|------|---------|
| `variant` | `"default" \| "outline"` | `"outline"` |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
| `ariaLabel` | `string` | `"Toggle theme"` |
| `class` | `string` | - |
```astro
```
**Additional Notes:**
- `variant`: Inherits from the Toggle component. Use `"outline"` for a bordered style
- `size`: Controls the button dimensions
- `ariaLabel`: Accessible label for screen readers
### Slots
| Slot | Description |
|------|-------------|
| `light-icon` | Icon shown when light theme is active (toggle is off) |
| `dark-icon` | Icon shown when dark theme is active (toggle is on) |
### Events
The component dispatches a `theme:change` event when the theme is toggled:
```typescript
interface ThemeChangeEvent {
detail: {
theme: "light" | "dark";
};
}
```
Listen for theme changes:
```astro
```