OPUS/UI

Navigation

OPUS/UI
DocsBackgroundsComponentsEffectsBlocksTheme

Getting started

Theme builder

OPUS colours are CSS variables in oklch, named like shadcn/ui. Pick a hue, chroma and radius — the previews (and, if you flip the switch, this whole site) update live. Copy the CSS into opus.css when you like it.

Presets

Recolours every page and remembers it in this browser.

lightPreview
A

Acme workspace

12 members · Pro

Active
Notifications
BadgeOutline
darkPreview
A

Acme workspace

12 members · Pro

Active
Notifications
BadgeOutline
paste over the :root / .dark blocks in opus.css
:root,
.light {
  --radius: 0.75rem;
  --background: oklch(0.992 0.0041 279);
  --foreground: oklch(0.18 0.0166 279);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --primary: oklch(0.55 0.23 279);
  --primary-foreground: oklch(0.99 0.005 279);
  --secondary: oklch(0.955 0.0083 279);
  --secondary-foreground: oklch(0.24 0.0193 279);
  --muted: oklch(0.962 0.0069 279);
  --muted-foreground: oklch(0.52 0.0221 279);
  --accent: oklch(0.95 0.0184 279);
  --accent-foreground: oklch(0.3 0.0805 279);
  --border: oklch(0.912 0.0097 279);
  --input: oklch(0.885 0.0124 279);
  --ring: oklch(0.55 0.23 279 / 0.55);
}

.dark {
  --background: oklch(0.145 0.0124 279);
  --foreground: oklch(0.965 0.0055 279);
  --card: oklch(0.172 0.0152 279);
  --popover: oklch(0.19 0.0166 279);
  --primary: oklch(0.67 0.2024 279);
  --primary-foreground: oklch(0.16 0.03 279);
  --secondary: oklch(0.235 0.0166 279);
  --secondary-foreground: oklch(0.94 0.0069 279);
  --muted: oklch(0.215 0.0152 279);
  --muted-foreground: oklch(0.69 0.0221 279);
  --accent: oklch(0.26 0.0345 279);
  --accent-foreground: oklch(0.95 0.023 279);
  --border: oklch(1 0 0 / 0.085);
  --input: oklch(1 0 0 / 0.13);
  --ring: oklch(0.67 0.2024 279 / 0.6);
}

How tokens work

  • Raw values live on :root (light) and .dark; @theme inline maps them to Tailwind colours like bg-primary, text-muted-foreground and border-border.
  • Any element with class="dark" or class="light" re-themes its subtree — that’s how the two previews above sit side by side.
  • Because utilities reference the variables directly, you can also scope a theme inline: style={{ "--primary": "oklch(0.7 0.2 150)" }}.
  • Semantic extras beyond shadcn: success, warning, info (each with a foreground), plus easing curves and the keyframes used by effects.

Command palette