Theming
ChromaKit is styled entirely with CSS custom properties. Override them on a wrapping class (passed via className) to reskin the picker — no build config, no props drilling.
Override variables on a class
Define the --ck-* variables you want to change on a class, then pass that class to the picker. Light and dark themes are handled automatically; you only override 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 right-hand picker uses the exact override shown above — sharper corners and a pink accent — while the left stays default.
Presets
Default
Presets
.ck-demo-theme
Available variables
Defaults shown are the light-theme values; each has a dark-theme counterpart applied under .dark.
| Variable | Default (light) | Description |
|---|---|---|
--ck-primary | #6366f1 | Accent color for thumbs, focus rings, active states. |
--ck-primary-glow | rgba(99,102,241,0.4) | Glow behind interactive elements. |
--ck-accent | #8b5cf6 | Secondary accent. |
--ck-bg | #f8f9fa | Picker background. |
--ck-bg-secondary | rgba(248,249,250,0.5) | Inset / secondary surfaces. |
--ck-text | #1a1a1a | Primary text. |
--ck-text-muted | #64748b | Labels and secondary text. |
--ck-glass-bg | rgba(255,255,255,0.7) | Frosted panel fill. |
--ck-glass-border | rgba(255,255,255,0.3) | Frosted panel border. |
--ck-glass-shadow | 0 8px 32px … | Panel shadow. |
--ck-blur | blur(20px) | Backdrop blur amount. |
--ck-radius | 12px | Outer corner radius. |
--ck-radius-md | 8px | Medium corner radius. |
--ck-radius-sm | 6px | Small corner radius. |