shadcn/ui Theme Generator

Generate custom shadcn/ui themes with CSS variables for light and dark mode. Copy-paste into your globals.css.

Colors

Primary#3b82f6

Secondary#6b7280

Accent#8b5cf6

Muted#f1f5f9

Destructive#ef4444

Border Radius

0.5rem

Preview

Light Mode

Muted background with muted foreground text

Dark Mode

globals.css

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 210 40% 10%;
    --card: 0 0% 100%;
    --card-foreground: 210 40% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 40% 10%;
    --primary: 217 91% 60%;
    --primary-foreground: 217 91% 5%;
    --secondary: 220 9% 46%;
    --secondary-foreground: 0 0% 98%;
    --muted: 210 40% 95%;
    --muted-foreground: 210 40% 45%;
    --accent: 258 90% 66%;
    --accent-foreground: 258 90% 5%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 210 40% 90%;
    --input: 210 40% 90%;
    --ring: 217 91% 60%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 210 40% 8%;
    --foreground: 210 40% 95%;
    --card: 210 40% 10%;
    --card-foreground: 210 40% 95%;
    --popover: 210 40% 10%;
    --popover-foreground: 210 40% 95%;
    --primary: 217 91% 55%;
    --primary-foreground: 0 0% 98%;
    --secondary: 220 9% 36%;
    --secondary-foreground: 0 0% 98%;
    --muted: 210 40% 18%;
    --muted-foreground: 210 40% 60%;
    --accent: 258 90% 56%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84% 45%;
    --destructive-foreground: 0 0% 98%;
    --border: 210 40% 20%;
    --input: 210 40% 20%;
    --ring: 217 91% 55%;
    --radius: 0.5rem;
  }
}