Styling and theming

import '@devix-labs/color-picker/styles.css';        // plain
import '@devix-labs/color-picker/styles.layer.css';  // the same, inside @layer devix

The layered stylesheet loses every specificity fight with your own CSS, which is what you want when the picker is dropped into a design system that already has opinions.

Variables#

Every visual decision is a custom property. Set them on .dxc, on an ancestor, or on :root:

.dxc {
  --dxc-width: 240px;
  --dxc-area-height: 160px;
  --dxc-radius: 10px;
  --dxc-gap: 10px;
  --dxc-font-size: 13px;
  --dxc-track: 12px;            /* the hue and opacity rails */
  --dxc-thumb: 14px;

  --dxc-bg: #fff;
  --dxc-text: #18181b;
  --dxc-muted: #71717a;
  --dxc-border: #e4e4e7;
  --dxc-accent: #ea4b71;        /* focus rings */
  --dxc-ring: color-mix(in srgb, var(--dxc-accent) 28%, transparent);
  --dxc-danger: #dc2626;        /* a failing contrast */
  --dxc-warn: #d97706;          /* out of gamut */
  --dxc-ok: #16a34a;            /* a passing contrast */
  --dxc-checks: repeating-conic-gradient(#e4e4e7 0% 25%, #fff 0% 50%) 50% / 10px 10px;
}

Dark#

theme: 'auto' reads the page — Tailwind's .dark, data-theme, Bootstrap's data-bs-theme, or simply the background colour behind the widget — and re-reads it when a theme toggle flips. Override the dark palette by redefining the same variables:

.dxc[data-theme='dark'] {
  --dxc-bg: #0b0b0f;
  --dxc-border: #26262c;
}

Or take the decision yourself with theme: 'light' or theme: 'dark'.

Your classes#

createColorPicker(input, {
  classNames: {
    root: 'rounded-2xl border-zinc-200 shadow-lg',
    area: 'rounded-xl',
    input: 'font-mono text-xs',
    swatch: 'ring-1 ring-black/5',
  },
});

Parts: root, area, thumb, sliders, hue, alpha, preview, fields, input, format, swatches, swatch, eyedropper, copy, contrast.

State#

Three recipes#

shadcn/ui — borrow its tokens and it disappears into the sheet it sits in:

.dxc {
  --dxc-bg: hsl(var(--popover));
  --dxc-text: hsl(var(--popover-foreground));
  --dxc-muted: hsl(var(--muted-foreground));
  --dxc-border: hsl(var(--border));
  --dxc-accent: hsl(var(--ring));
  --dxc-radius: var(--radius);
  --dxc-font-size: 0.875rem;
}

Bootstrap 5 — its variables, including dark mode, which data-bs-theme already drives:

.dxc {
  --dxc-bg: var(--bs-body-bg);
  --dxc-text: var(--bs-body-color);
  --dxc-muted: var(--bs-secondary-color);
  --dxc-border: var(--bs-border-color);
  --dxc-accent: var(--bs-primary);
  --dxc-radius: var(--bs-border-radius);
}

Material 3 — its roles and shape scale:

.dxc {
  --dxc-bg: var(--md-sys-color-surface-container);
  --dxc-text: var(--md-sys-color-on-surface);
  --dxc-muted: var(--md-sys-color-on-surface-variant);
  --dxc-border: var(--md-sys-color-outline-variant);
  --dxc-accent: var(--md-sys-color-primary);
  --dxc-radius: 16px;
  --dxc-thumb: 20px;
}

Wider, or narrower#

The widget is display: inline-flex at --dxc-width. To let it fill a column instead:

.dxc { --dxc-width: 100%; --dxc-area-height: 220px; }

Nothing inside is sized in fixed pixels except the rails and the thumb, both of which are variables.