jjodielo

Indigo Rose shadcn/ui theme

Explore the Indigo Rose shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.

shadcn/ui theme

Open in editor
About

Indigo Rose re-skins your whole app: colours, radius and type for light and dark mode. Copy it and paste it into your coding agent, or take the tokens below into your globals.css.

light

  • --backgroundhsl(243 17.8% 97.8%)
  • --foregroundhsl(336 81.2% 25.7%)
  • --primary#221c89
  • --primary-foregroundhsl(209 0% 100%)
  • --secondaryrgba(255, 208, 229, 0.57)
  • --accentrgba(255, 204, 218, 0.85)
  • --mutedrgba(213, 49, 109, 0.23)
  • --muted-foregroundhsl(240 26% 69.8%)
  • --cardhsl(0 0% 100% / 0.54)
  • --border#cacbe7
  • --ring#ec6d9a
  • --destructivehsl(0 84.2% 60.2%)

dark

  • --backgroundhsl(240 80% 8%)
  • --foregroundhsl(230 44.1% 84.7%)
  • --primaryhsl(225 61% 83%)
  • --primary-foregroundhsl(231 67.7% 17%)
  • --secondaryhsl(336 60.7% 51.1% / 0.61)
  • --accenthsl(238 63% 66%)
  • --mutedhsl(345 75.3% 67.9% / 0.47)
  • --muted-foregroundhsl(236 42.3% 69.5%)
  • --cardhsl(235 46.4% 81% / 0.07)
  • --borderhsl(235 42% 69% / 0.18)
  • --ringhsl(338 50.1% 65.3% / 0.66)
  • --destructivehsl(0 84.2% 60.2%)

More themes

View all