Parrot is a shadcn/ui theme built around a vivid light green primary color (#d9fce9) with muted green accents (#afcfbe). The light mode uses a neutral background (#ffffff). Dark mode keeps the vivid light green primary (#d9fce9) on a green-tinted background (#060e0a).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #060e0ablack |
| Foreground | #010502black | #fcfdfcwhite |
| Card | #fcfcfcsnow | #08120cblack |
| Card foreground | #000000black | #ffffffwhite |
| Popover | #fcfcfcsnow | #08120cblack |
| Popover foreground | #000000black | #ffffffwhite |
| Primary | #d9fce9lightcyan | #d9fce9lightcyan |
| Primary foreground | #05391ddarkgreen | #05391ddarkgreen |
| Secondary | #cbdcd3lightgrey | #26362ddarkslategray |
| Secondary foreground | #30463adarkslategray | #bdd0c6silver |
| Muted | #d8e4ddgainsboro | #1b2721black |
| Muted foreground | #4b4e4cdarkslategray | #b1b4b2darkgray |
| Accent | #afcfbesilver | #315441darkslategray |
| Accent foreground | #1d3026darkslategray | #d2e5dbgainsboro |
| Destructive | #a0260efirebrick | #d33212firebrick |
| Destructive foreground | #fde7e3mistyrose | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #d9fce9lightcyan | #d9fce9lightcyan |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.51:1 | AAA |
| Text on card | 20.54:1 | AAA |
| Primary button | 11.84:1 | AAA |
| Secondary button | 7.13:1 | AAA |
| Muted text | 6.44:1 | AA |
| Accent | 8.32:1 | AAA |
| Destructive | 6.39:1 | AA |
| Text on background | 19.14:1 | AAA |
| Text on card | 19.09:1 | AAA |
| Primary button | 11.84:1 | AAA |
| Secondary button | 7.91:1 | AAA |
| Muted text | 7.36:1 | AAA |
| Accent | 6.48:1 | AA |
| Destructive | 4.94:1 | AA |
Paste this into your globals.css to use Parrot in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.1 0.018 163.54);
--muted: oklch(0.908 0.016 162.987);
--muted-foreground: oklch(0.421 0.005 163.155);
--popover: oklch(0.992 0 161.565);
--popover-foreground: oklch(0 0 0);
--card: oklch(0.992 0 161.565);
--card-foreground: oklch(0 0 0);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.961 0.044 162.248);
--primary-foreground: oklch(0.303 0.072 154.036);
--secondary: oklch(0.879 0.021 162.819);
--secondary-foreground: oklch(0.371 0.035 160.811);
--accent: oklch(0.827 0.041 162.113);
--accent-foreground: oklch(0.288 0.031 160.302);
--destructive: oklch(0.464 0.161 32.825);
--destructive-foreground: oklch(0.944 0.024 31.11);
--ring: oklch(0.961 0.044 162.248);
--chart-1: oklch(0.961 0.044 162.248);
--chart-2: oklch(0.879 0.021 162.819);
--chart-3: oklch(0.827 0.041 162.113);
--chart-4: oklch(0.901 0.017 162.947);
--chart-5: oklch(0.962 0.045 162.206);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.154 0.016 162.085);
--foreground: oklch(0.993 0.001 163.407);
--muted: oklch(0.26 0.022 161.152);
--muted-foreground: oklch(0.767 0.004 163.308);
--popover: oklch(0.169 0.018 160.659);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.169 0.018 160.659);
--card-foreground: oklch(1 0 180);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.961 0.044 162.248);
--primary-foreground: oklch(0.303 0.072 154.036);
--secondary: oklch(0.315 0.025 161.208);
--secondary-foreground: oklch(0.842 0.025 162.677);
--accent: oklch(0.412 0.051 159.759);
--accent-foreground: oklch(0.904 0.024 162.763);
--destructive: oklch(0.569 0.201 32.681);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.961 0.044 162.248);
--chart-1: oklch(0.961 0.044 162.248);
--chart-2: oklch(0.315 0.025 161.208);
--chart-3: oklch(0.412 0.051 159.759);
--chart-4: oklch(0.347 0.029 161.131);
--chart-5: oklch(0.962 0.045 162.206);
}