ColorSchemePicker
A reactive island component that lets users choose a primary color scheme from a palette of swatches. The selected color is stored in localStorage and applied by injecting a <style> tag that overrides the --dv-color-primary-* CSS variables. A "Copy CSS" button copies the override block to the clipboard.
Live demo
import ColorSchemePicker from '@davaux/ui/ColorSchemePicker'
<ColorSchemePicker />With a pre-selected value
<ColorSchemePicker value="violet" />Available colors
The picker covers all 14 palette scales, ordered by hue:
grayredcrimsonpinkgrapevioletindigobluecyantealgreenlimeyelloworange
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | 'gray'|'red'|'crimson'|'pink'|'grape'|'violet'|'indigo'|'blue'|'cyan'|'teal'|'green'|'lime'|'yellow'|'orange' | stored value | Pre-selected color name on first render |