An icon button that flips between light and dark. Deliberately stateless: it shows the state you pass as isDark and emits toggle, leaving persistence to the host (@nuxtjs/color-mode, VueUse, or two hand-written lines). The sun and moon share a cell and cross-fade with a quarter turn. Because dark mode depends on a client-only preference, wrap it in <ClientOnly> when server-rendering to avoid a hydration mismatch.
Examples
Light / dark
It renders the state you give it and emits toggle for you to flip.
<UiThemeToggle
:is-dark="state.dark"
:label="state.dark ? 'Switch to light mode' : 'Switch to dark mode'"
@toggle="state.dark = !state.dark"
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| isDark | boolean | false | Whether the dark theme is active; chooses which glyph shows. |
| label | string | 'Toggle theme' | Accessible name and tooltip; describe the action, e.g. "Switch to dark mode". |
Events
| Event | Payload | Description |
|---|---|---|
toggle | none | Emitted when the button is pressed; the parent flips the theme. |