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.
Ejemplos
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
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| 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". |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
toggle | none | Emitted when the button is pressed; the parent flips the theme. |