ThemeToggle
Toggle switch for dark/light theme. Persists preference to localStorage and sets data-theme on the document element.
Example
Theme: light
Props
| Prop | Type | Default | Description |
|---|---|---|---|
theme | 'dark' | 'light' | 'light' | Current theme (bindable) |
onThemeChange | (theme: 'dark' | 'light') => void | — | Callback when theme changes |
class | string | — | Additional CSS classes |
Usage
<script>
import { ThemeToggle } from '@chrissnell/chonky-ui';
let theme = $state<'dark' | 'light'>('dark');
</script>
<ThemeToggle bind:theme />
<ThemeToggle onThemeChange={(t) => console.log(t)} />