# Theme Toggle

## Example

```svelte
<script>
	import { ThemeToggle } from '@foxui/all';
</script>

<div class="flex items-center gap-2">
	<ThemeToggle />
</div>
```

## Documentation

## Usage

```svelte
<ThemeToggle />
```

If this component is used anywhere on your site, the mode will default to system settings (if the user has not manually set the mode).

## Accessibility

- If javascript is disabled, the theme toggle will not be shown.

## Sources

Based on "mode-watcher" (https://github.com/svecosystem/mode-watcher)

## API Reference

### ThemeToggle
A button that toggles between light, dark, and system theme modes. Uses mode-watcher under the hood.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| defaultMode | `'light' | 'dark' | 'system'` | `'system'` | The initial theme mode. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |