npm i @velkin/react
import { VuThemeProvider } from "@velkin/react/theme-provider";| Prop | Type | Default | Description |
|---|---|---|---|
| theme | VuThemeConfig | — | Brand seeds (`primary`, intents, `radius`, `spacing`, `tint`, fonts) plus optional per-mode seeds and raw `vars`. |
| scope | VuThemeProviderScope | "root" | Where CSS variables are applied. Default: `"root"`. |
| preference | ThemePreference | "system" | Stored UI preference. Default: `"system"`. |
| persist | boolean | true | Persists preference to localStorage when scope includes root. Default: `true`. |
| broadcast | boolean | true | Emits global theme events when the active mode changes. Default: `true`. |
| locale | string | "en" | BCP 47 locale for built-in `msg()` strings. Default: `"en"`. |
| injectStyles | boolean | true | When false, skips injected token styles. Default: `true`. |
| vibrantpalette | boolean | false | Higher-contrast soft intent foregrounds. Default: `false`. |
| glass | boolean | true | App-wide glassmorphism for elevated surfaces and overlays. Does not paint a page background gradient — set your own. Default: `true`. |
| Event | Detail | Description |
|---|---|---|
| vu-theme | VuThemeProviderChangeDetail | Bubbles when broadcast is true. |
| Slot | Description |
|---|---|
| — | - App subtree that inherits theme tokens and locale. |
| Method | Description |
|---|---|
| setPreference | - Sets preference, optionally persists, and emits theme events when broadcast is true. |
| togglePreference | - Cycles preference light, dark, then system. |
| Name | Definition |
|---|---|
| ThemePreference | |
| VuThemeProviderChangeDetail | |
| VuThemeProviderScope | |