ThemeToggle
A reactive island component that toggles between light and dark color schemes by setting data-dv-color-scheme on <html> and persisting the choice in localStorage. The layout already places this in the sidebar footer.
Default
import ThemeToggle from '@davaux/ui/ThemeToggle'
<ThemeToggle />Custom labels
<ThemeToggle lightLabel="Light mode" darkLabel="Dark mode" />Button variants and sizes
<ThemeToggle variant="filled" size="sm" />
<ThemeToggle variant="outline" size="md" />
<ThemeToggle variant="light" size="lg" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | 'default' | Button variant applied to the underlying dv-button element |
size | string | 'sm' | Button size applied to the underlying dv-button element |
lightLabel | string | '☀ Light' | Label shown when the current theme is dark (clicking switches to light) |
darkLabel | string | '☽ Dark' | Label shown when the current theme is light (clicking switches to dark) |