Theme builder

Tune your colors.

Pick a preset, switch between light and dark, and tweak any token by hand. The CSS snippet on the right drops straight into your globals.css.

Preset
Tokens
Background--background
Foreground--foreground
Card--card
Primary--primary
Primary fg--primary-foreground
Muted--muted
Muted fg--muted-foreground
Border--border
Ring--ring
Live preview
Primary
Headline
Muted
Headline
Inverse
Headline
globals.css
/* JSN UI — default (light) */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 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);
}