Theming

ChromaKit is styled with --ck-* CSS custom properties. Set them on a class and pass that class through className. No build step, no theme prop.

Override variables on a class

Define the variables you want to change on a class, then pass that class to the picker. It follows the OS color scheme or a .dark class, so override only what differs.

/* your stylesheet */
.brand-picker {
  --ck-primary: #ec4899;
  --ck-accent: #f43f5e;
  --ck-primary-glow: rgba(236, 72, 153, 0.4);
  --ck-radius: 4px;
  --ck-radius-md: 3px;
  --ck-radius-sm: 2px;
}

<ColorPicker className="brand-picker" />

Live comparison

The first picker uses the default theme. The second uses the override above: a pink accent and tighter corners.

Default vs .brand-picker

Default

.brand-picker

Glass theme

Earlier versions shipped a frosted-glass look. Add the ck-theme-glass class to bring back its palette, radii, blur, and shadows.

<ColorPicker className="ck-theme-glass" />

Available variables

Defaults shown are the light-theme values; each has a dark-theme counterpart applied under .dark.

Variable	Default (light)	Description
`--ck-primary`	`#111111`	Active tabs, focus rings, selected swatches, hover borders.
`--ck-on-primary`	`#ffffff`	Text and icons drawn on a --ck-primary fill.
`--ck-accent`	`#111111`	Second stop of the copied-state fill.
`--ck-primary-glow`	`transparent`	Glow behind interactive elements (used by the glass theme).
`--ck-frame`	`#111111`	Outer picker border.
`--ck-bg`	`#ffffff`	Picker background.
`--ck-bg-secondary`	`#f4f4f4`	Hover and secondary surfaces.
`--ck-text`	`#111111`	Primary text.
`--ck-text-muted`	`#5c5c5c`	Labels and secondary text.
`--ck-glass-bg`	`#ffffff`	Panel, input, and button fill.
`--ck-glass-bg-strong`	`#ffffff`	Hovered and focused fill.
`--ck-glass-border`	`#d4d4d4`	Hairline borders inside the picker.
`--ck-glass-shadow`	`none`	Control shadow.
`--ck-glass-shadow-lg`	`none`	Panel shadow.
`--ck-blur`	`none`	Backdrop blur.
`--ck-blur-strong`	`none`	Stronger backdrop blur.
`--ck-radius`	`0px`	Outer corner radius.
`--ck-radius-md`	`0px`	Color area and preview radius.
`--ck-radius-sm`	`0px`	Inputs, buttons, and swatches radius.
`--ck-track-radius`	`0px`	Hue and alpha track radius.