shadcn-themes.md

/* Spiderman */
@layer base {
  :root {
    --background: 210 100% 20%;
    --foreground: 0 100% 50%;
    --card: 210 100% 25%;
    --card-foreground: 0 100% 55%;
    --popover: 210 100% 30%;
    --popover-foreground: 0 100% 60%;
    --primary: 0 100% 50%;
    --primary-foreground: 210 100% 20%;
    --secondary: 210 100% 50%;
    --secondary-foreground: 0 100% 20%;
    --muted: 210 100% 15%;
    --muted-foreground: 0 100% 45%;
    --accent: 0 100% 55%;
    --accent-foreground: 210 100% 25%;
    --destructive: 0 100% 40%;
    --destructive-foreground: 210 100% 15%;
    --border: 210 100% 10%;
    --input: 210 100% 20%;
    --ring: 0 100% 50%;
    --radius: 4px;
  }

/* Green Lantern */
@layer base {
  :root {
    --background: 120 100% 10%;
    --foreground: 120 100% 90%;
    --card: 120 100% 15%;
    --card-foreground: 120 100% 85%;
    --popover: 120 100% 20%;
    --popover-foreground: 120 100% 80%;
    --primary: 120 100% 50%;
    --primary-foreground: 120 100% 95%;
    --secondary: 120 50% 50%;
    --secondary-foreground: 120 50% 95%;
    --muted: 120 20% 50%;
    --muted-foreground: 120 20% 95%;
    --accent: 120 80% 50%;
    --accent-foreground: 120 80% 95%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 100% 95%;
    --border: 120 100% 25%;
    --input: 120 100% 30%;
    --ring: 120 100% 35%;
    --radius: 8px;
  }
}

/* Batman theme */
@layer base {
  :root {
    --background: 210 10% 10%;
    --foreground: 210 10% 90%;
    --card: 210 10% 15%;
    --card-foreground: 210 10% 85%;
    --popover: 210 10% 20%;
    --popover-foreground: 210 10% 80%;
    --primary: 50 100% 50%;
    --primary-foreground: 50 100% 10%;
    --secondary: 210 10% 30%;
    --secondary-foreground: 210 10% 70%;
    --muted: 210 10% 25%;
    --muted-foreground: 210 10% 75%;
    --accent: 50 100% 50%;
    --accent-foreground: 50 100% 10%;
    --destructive: 0 100% 40%;
    --destructive-foreground: 0 100% 90%;
    --border: 210 10% 40%;
    --input: 210 10% 50%;
    --ring: 50 100% 50%;
    --radius: 4px;
  }
}

/* Barbie theme */

@layer base {
  :root {
    --background: 330 100% 95%;
    --foreground: 330 100% 20%;
    --card: 330 100% 98%;
    --card-foreground: 330 100% 20%;
    --popover: 330 100% 98%;
    --popover-foreground: 330 100% 20%;
    --primary: 330 100% 50%;
    --primary-foreground: 330 100% 95%;
    --secondary: 330 100% 70%;
    --secondary-foreground: 330 100% 20%;
    --muted: 330 100% 90%;
    --muted-foreground: 330 100% 40%;
    --accent: 330 100% 60%;
    --accent-foreground: 330 100% 95%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 100% 95%;
    --border: 330 100% 85%;
    --input: 330 100% 95%;
    --ring: 330 100% 50%;
    --radius: 0.5rem;
  }
 }

Thank You

Welcome!

Thank You