Origin is out. See it

Theming

Edit on GitHub

Blocks read your shadcn tokens, so light mode, dark mode and your colours apply without extra setup.

PrequelUI blocks never hard-code colours. They use only the shadcn/ui design tokens, so a block automatically matches your app in light and dark mode and recolours when you change your theme.

shadcn tokens

Blocks use the same utility classes you already know — bg-card, text-foreground, text-muted-foreground, border-border and bg-muted. These classes map to the CSS variables in your globals.css:

globals.css
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.205 0 0);
  --chart-2: oklch(0.439 0 0);
  --chart-3: oklch(0.556 0 0);
  --chart-4: oklch(0.708 0 0);
  --chart-5: oklch(0.87 0 0);
  --success: oklch(0.6 0.13 155);
}

Chart tokens

Charts draw from the five chart tokens var(--chart-1) to var(--chart-5), so series pick up your brand colours. Positive deltas use var(--success) and negative ones use var(--destructive).

  • --chart-1 to --chart-5 — the series colours in every chart.
  • --success — upward, good changes (revenue up, uptime healthy).
  • --destructive — downward or bad changes.

Light and dark

Blocks look correct in both modes out of the box. shadcn/ui switches modes by toggling the .dark class on <html>, which redefines the same tokens:

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.17 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --chart-1: oklch(0.985 0 0);
  --chart-5: oklch(0.32 0 0);
}

Because a block only references the tokens, it follows the mode switch automatically. You never write separate light and dark styles for a block.

How to recolour

To recolour every block at once, edit the token values in your theme. Two examples:

/* A blue brand accent for the first chart series */
:root {
  --chart-1: oklch(0.55 0.2 250);
}

/* A green "good" colour */
:root {
  --success: oklch(0.55 0.15 155);
}

Change the values and the blocks follow — no block code needs to change. This is the same workflow you already use to theme any shadcn/ui project.

Want a chart in a specific colour? Pass the tone or colour prop a block exposes, or override --chart-1 through --chart-5 locally.

For a deeper look at how the tokens are wired, see the registry — every block ships as plain Tailwind classes you can read and change.