Disguised is a shadcn/ui theme built around a light green primary color (#f5faeb) with light green accents (#edfaeb). The light mode uses a neutral background (#fdfefb). Dark mode keeps the light green primary (#f5faeb) on a neutral background (#030302).
| Token | Light | Dark |
|---|---|---|
| Background | #fdfefbwhite | #030302black |
| Foreground | #000000black | #fdfdfcwhite |
| Card | #fbfdf7snow | #060704black |
| Card foreground | #000000black | #ffffffwhite |
| Popover | #fdfefbwhite | #030302black |
| Popover foreground | #000000black | #fdfdfcwhite |
| Primary | #f5faebhoneydew | #f5faebhoneydew |
| Primary foreground | #2e3c10darkgreen | #2e3c10darkgreen |
| Secondary | #faf7eboldlace | #faf7eboldlace |
| Secondary foreground | #3c3510darkolivegreen | #3c3510darkolivegreen |
| Muted | #dedcd4gainsboro | #2b2a21darkslategray |
| Muted foreground | #706d5cdimgray | #a3a08fdarkgray |
| Accent | #edfaebhoneydew | #edfaebhoneydew |
| Accent foreground | #173c10darkgreen | #173c10darkgreen |
| Destructive | #832207maroon | #f45d34tomato |
| Destructive foreground | #fccdc0peachpuff | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #f5faebhoneydew | #f5faebhoneydew |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.72:1 | AAA |
| Text on card | 20.45:1 | AAA |
| Primary button | 11.13:1 | AAA |
| Secondary button | 11.45:1 | AAA |
| Muted text | 3.79:1 | AA Large |
| Accent | 11.50:1 | AAA |
| Destructive | 6.67:1 | AA |
| Text on background | 20.24:1 | AAA |
| Text on card | 20.23:1 | AAA |
| Primary button | 11.13:1 | AAA |
| Secondary button | 11.45:1 | AAA |
| Muted text | 5.50:1 | AA |
| Accent | 11.50:1 | AAA |
| Destructive | 6.48:1 | AA |
Paste this into your globals.css to use Disguised in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.995 0.004 121.554);
--foreground: oklch(0 0 0);
--muted: oklch(0.894 0.011 97.426);
--muted-foreground: oklch(0.532 0.026 97.846);
--popover: oklch(0.995 0.004 121.554);
--popover-foreground: oklch(0 0 0);
--card: oklch(0.99 0.008 121.617);
--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.976 0.02 121.826);
--primary-foreground: oklch(0.334 0.069 125.702);
--secondary: oklch(0.975 0.016 97.48);
--secondary-foreground: oklch(0.328 0.055 97.956);
--accent: oklch(0.971 0.023 140.494);
--accent-foreground: oklch(0.319 0.083 140.498);
--destructive: oklch(0.406 0.136 34.879);
--destructive-foreground: oklch(0.885 0.056 35.963);
--ring: oklch(0.976 0.02 121.826);
--chart-1: oklch(0.976 0.02 121.826);
--chart-2: oklch(0.975 0.016 97.48);
--chart-3: oklch(0.971 0.023 140.494);
--chart-4: oklch(0.99 0.007 97.348);
--chart-5: oklch(0.977 0.021 121.843);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.098 0.008 121.292);
--foreground: oklch(0.994 0.002 121.525);
--muted: oklch(0.282 0.015 97.883);
--muted-foreground: oklch(0.703 0.024 97.694);
--popover: oklch(0.098 0.008 121.292);
--popover-foreground: oklch(0.994 0.002 121.525);
--card: oklch(0.123 0.011 121.292);
--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.976 0.02 121.826);
--primary-foreground: oklch(0.334 0.069 125.702);
--secondary: oklch(0.975 0.016 97.48);
--secondary-foreground: oklch(0.328 0.055 97.956);
--accent: oklch(0.971 0.023 140.494);
--accent-foreground: oklch(0.319 0.083 140.498);
--destructive: oklch(0.671 0.194 35.997);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.976 0.02 121.826);
--chart-1: oklch(0.976 0.02 121.826);
--chart-2: oklch(0.975 0.016 97.48);
--chart-3: oklch(0.971 0.023 140.494);
--chart-4: oklch(0.99 0.007 97.348);
--chart-5: oklch(0.977 0.021 121.843);
}