Generate feedback colors (success, warning, error, and info) for shadcn/ui

Go to generator

10000+Themes for shadcn/ui

Used by 4k+ developers. Want me to build your product next? Let's work together.

Book a Call

Philodendron Lemming for shadcn/ui

Philodendron Lemming is a shadcn/ui theme built around a deep teal primary color (#1a6253) with muted light blue accents (#f3f4f6). The light mode uses a neutral background (#ffffff). Dark mode switches to a green primary (#217c36) on a blue-tinted background (#1e293b).

Color palette

TokenLightDark
Background
#ffffffwhite
#1e293bdarkslategray
Foreground
#1e293bdarkslategray
#f9fafbghostwhite
Card
#ffffffwhite
#1e293bdarkslategray
Card foreground
#1e293bdarkslategray
#f9fafbghostwhite
Popover
#ffffffwhite
#1e293bdarkslategray
Popover foreground
#1e293bdarkslategray
#f9fafbghostwhite
Primary
#1a6253darkslategray
#217c36forestgreen
Primary foreground
#f9fafbghostwhite
#f9fafbghostwhite
Secondary
#f3f4f6whitesmoke
#475569darkslategray
Secondary foreground
#111827black
#f9fafbghostwhite
Muted
#f3f4f6whitesmoke
#313c4ddarkslategray
Muted foreground
#6b7280slategray
#9ca3afdarkgray
Accent
#f3f4f6whitesmoke
#313c4ddarkslategray
Accent foreground
#111827black
#f9fafbghostwhite
Destructive
#ef4444tomato
#bc0d0dfirebrick
Destructive foreground
#f9fafbghostwhite
#f9fafbghostwhite
Border
#e5e7eblavender
#313c4ddarkslategray
Input
#e5e7eblavender
#313c4ddarkslategray
Ring
#7c3aedblueviolet
#7c3aedblueviolet

Contrast

WCAG 2 contrast ratios between each background and its foreground color.

Light mode
Text on background14.62:1AAA
Text on card14.62:1AAA
Primary button6.88:1AA
Secondary button16.12:1AAA
Muted text4.39:1AA Large
Accent16.12:1AAA
Destructive3.60:1AA Large
Dark mode
Text on background13.99:1AAA
Text on card13.99:1AAA
Primary button5.05:1AA
Secondary button7.25:1AAA
Muted text4.38:1AA Large
Accent10.66:1AAA
Destructive6.25:1AA

CSS variables

Paste this into your globals.css to use Philodendron Lemming in your shadcn/ui project.

:root {
  --radius: 0.5rem;
  --background: oklch(1 0 180);
  --foreground: oklch(0.279 0.037 260.029);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.551 0.023 264.365);
  --popover: oklch(1 0 180);
  --popover-foreground: oklch(0.279 0.037 260.029);
  --card: oklch(1 0 180);
  --card-foreground: oklch(0.279 0.037 260.029);
  --border: oklch(0.928 0.006 264.531);
  --input: oklch(0.928 0.006 264.531);
  --primary: oklch(0.448 0.074 175.825);
  --primary-foreground: oklch(0.984 0.002 247.84);
  --secondary: oklch(0.967 0.003 264.542);
  --secondary-foreground: oklch(0.21 0.032 264.652);
  --accent: oklch(0.967 0.003 264.542);
  --accent-foreground: oklch(0.21 0.032 264.652);
  --destructive: oklch(0.637 0.208 25.326);
  --destructive-foreground: oklch(0.984 0.002 247.84);
  --ring: oklch(0.541 0.247 292.951);
  --chart-1: oklch(0.448 0.074 175.825);
  --chart-2: oklch(0.967 0.003 264.542);
  --chart-3: oklch(0.967 0.003 264.542);
  --chart-4: oklch(0.991 0.001 264.549);
  --chart-5: oklch(0.454 0.076 175.498);
}

.dark {
  --radius: 0.5rem;
  --background: oklch(0.279 0.037 260.029);
  --foreground: oklch(0.984 0.002 247.84);
  --muted: oklch(0.354 0.033 258.98);
  --muted-foreground: oklch(0.714 0.019 261.333);
  --popover: oklch(0.279 0.037 260.029);
  --popover-foreground: oklch(0.984 0.002 247.84);
  --card: oklch(0.279 0.037 260.029);
  --card-foreground: oklch(0.984 0.002 247.84);
  --border: oklch(0.354 0.032 256.835);
  --input: oklch(0.354 0.033 258.98);
  --primary: oklch(0.516 0.135 147.181);
  --primary-foreground: oklch(0.984 0.002 247.84);
  --secondary: oklch(0.446 0.037 257.275);
  --secondary-foreground: oklch(0.984 0.002 247.84);
  --accent: oklch(0.354 0.033 258.98);
  --accent-foreground: oklch(0.984 0.002 247.84);
  --destructive: oklch(0.504 0.201 28.597);
  --destructive-foreground: oklch(0.984 0.002 247.84);
  --ring: oklch(0.541 0.247 293.003);
  --chart-1: oklch(0.516 0.135 147.181);
  --chart-2: oklch(0.446 0.037 257.275);
  --chart-3: oklch(0.354 0.033 258.98);
  --chart-4: oklch(0.472 0.04 257.275);
  --chart-5: oklch(0.522 0.14 146.931);
}

More shadcn/ui themes

TermsPrivacy Policy