Theming

Parable components lean on the shadcn / Tailwind v4 token system, so they inherit your app's theme automatically.

Tokens

Components reference semantic tokens — background, foreground, muted, border, ring — rather than hard-coded colours, so they follow your light and dark themes without extra work. Most also accept explicit colour props (shimmerColor, colors, color) when you want to override.

The Parable palette

The marketplace itself runs on six named tokens (defined in globals.css, see the design language): --pb-ink (near-black ground), --pb-vellum (off-white), and four chroma values — --pb-violet #8b5cf6, --pb-fuchsia #ec4899, --pb-ember #f5a623, --pb-signal #22d3ee — that appear inside rendered moments only (shaders, gradients, particles), never as flat UI fills. Component colour props default to these same hex values, so installed components match the previews without your app needing the variables. Motion is tokenised too: --pb-ease-out cubic-bezier(.22,1,.36,1), --pb-ease-snap cubic-bezier(.16,1,.3,1), and durations 150/300/500ms.

Dark mode

Parable uses next-themes with attribute="class". Any .dark strategy works — the components read the same CSS variables in both themes.

Motion tokens

Each animated component ships its own keyframes (injected once into document.head, not per instance) and every one honours prefers-reduced-motion: marquees freeze, springs snap to their target, loaders hold at mid-opacity. You get this for free — no configuration.

Customising

Because the source lives in your repo, theming is just editing the file:

• Change the Tailwind classes on the root element.
• Swap the injected keyframes.
• Tweak the default prop values.

Nothing is hidden in a package you can't reach.