Theme generator

Create a theme

Customize the OKLCH color tokens and radius, preview the change on real components, then export the theme as a CSS variables block, a npx shadcn add command, or design tokens. Your theme is saved to the URL so you can share it.

Theme

Pick a theme to recolor the entire site, then fine-tune the tokens below. Your choice is saved across the site.

Border radius

Background

Foreground

Card

Card Foreground

Popover

Popover Foreground

Primary

Primary Foreground

Secondary

Secondary Foreground

Muted

Muted Foreground

Accent

Accent Foreground

Destructive

Destructive Foreground

Border

Input

Ring

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.1445 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.1445 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.1445 0 0);
  --primary: oklch(0.2044 0 0);
  --primary-foreground: oklch(0.9848 0 0);
  --secondary: oklch(0.9703 0 0);
  --secondary-foreground: oklch(0.2044 0 0);
  --muted: oklch(0.9703 0 0);
  --muted-foreground: oklch(0.5555 0 0);
  --accent: oklch(0.9703 0 0);
  --accent-foreground: oklch(0.2044 0 0);
  --destructive: oklch(0.6368 0.2078 25.326);
  --destructive-foreground: oklch(0.9848 0 0);
  --border: oklch(0.9219 0 0);
  --input: oklch(0.9219 0 0);
  --ring: oklch(0.1445 0 0);
  --radius: 0.5rem;
}

.dark {
  --background: oklch(0 0 0);
  --foreground: oklch(0.9848 0 0);
  --card: oklch(0.1445 0 0);
  --card-foreground: oklch(0.9848 0 0);
  --popover: oklch(0.1445 0 0);
  --popover-foreground: oklch(0.9848 0 0);
  --primary: oklch(0.9848 0 0);
  --primary-foreground: oklch(0.2044 0 0);
  --secondary: oklch(0.2686 0 0);
  --secondary-foreground: oklch(0.9848 0 0);
  --muted: oklch(0.2686 0 0);
  --muted-foreground: oklch(0.7153 0 0);
  --accent: oklch(0.2686 0 0);
  --accent-foreground: oklch(0.9848 0 0);
  --destructive: oklch(0.3959 0.1331 25.721);
  --destructive-foreground: oklch(0.9848 0 0);
  --border: oklch(0.2686 0 0);
  --input: oklch(0.2686 0 0);
  --ring: oklch(0.8697 0 0);
}

The quick brown fox

Jumps over the lazy dog. This preview uses your live theme tokens.

BadgeSecondaryOutlineDestructive

Upgrade your plan

Unlock unlimited projects and priority support.

Cards use the card, border, and muted tokens together.