npm i @velkin/react
import { VuThemeSwitcher } from "@velkin/react/theme-switcher";| Prop | Type | Default | Description |
|---|---|---|---|
| darkIcon | "ion:moon-outline" | "ion:moon-outline" | Iconify id for dark preference. |
| lightIcon | "ion:sunny-outline" | "ion:sunny-outline" | Iconify id for light preference. |
| systemIcon | "ion:desktop-outline" | "ion:desktop-outline" | Iconify id for system preference. |
| type | VuThemeSwitcherType | "button" | `button` cycles on click; `switch` shows all three options. |
| color | VuThemeSwitcherColor | "default" | Token intent forwarded to the active control. |
| disabled | boolean | false | Disables interaction. Default: `false`. |
| size | VuThemeSwitcherSize | "md" | Child button / tab size. |
| variant | VuThemeSwitcherVariant | "ghost" | Visual variant for `type="button"` only. |
| radius | VuThemeSwitcherRadius | "md" | Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `md`. |
| iconOnly | boolean | true | Square icon segments in `type="switch"`; cycling button is always icon-only. |
| Event | Detail | Description |
|---|---|---|
| vu-theme | VuThemeSwitcherChangeDetail | Fired when the user changes preference. |
| Slot | Description |
|---|---|
| icon | Optional slot to override the cycling button icon (`type="button"` only). |
| Part | Description |
|---|---|
| container | Wrapper around the control. |
| button | Cycling `<vu-button>` when `type="button"`. |
| switch | Segmented `<vu-tab>` when `type="switch"`. |
| icon | Theme icon inside the active control. |
| Method | Description |
|---|---|
| toggleTheme | - Cycles preference light → system → dark and emits `vu-theme`. |
| Name | Definition |
|---|---|
| VuThemeSwitcherChangeDetail | |
| VuThemeSwitcherColor | |
| VuThemeSwitcherRadius | |
| VuThemeSwitcherSize | |
| VuThemeSwitcherType | |
| VuThemeSwitcherVariant | |