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

PropTypeDefaultDescription
value'gray'|'red'|'crimson'|'pink'|'grape'|'violet'|'indigo'|'blue'|'cyan'|'teal'|'green'|'lime'|'yellow'|'orange'stored valuePre-selected color name on first render