Fox is a shadcn/ui theme built around a deep green primary color (#263b11) with deep pink accents (#3b1126). The light mode uses a neutral background (#fafdf7). Dark mode keeps the deep green primary (#263b11) on a neutral background (#050802).
| Token | Light | Dark |
|---|---|---|
| Background | #fafdf7mintcream | #050802black |
| Foreground | #000000black | #fcfdfcwhite |
| Card | #fafdf7mintcream | #050802black |
| Card foreground | #000000black | #fcfdfcwhite |
| Popover | #fafdf7mintcream | #050802black |
| Popover foreground | #000000black | #fcfdfcwhite |
| Primary | #263b11darkgreen | #263b11darkgreen |
| Primary foreground | #8acb4dyellowgreen | #8acb4dyellowgreen |
| Secondary | #11263bdarkslategray | #11263bdarkslategray |
| Secondary foreground | #9cbee2lightsteelblue | #9cbee2lightsteelblue |
| Muted | #d1dbe5gainsboro | #1a232edarkslategray |
| Muted foreground | #646668dimgray | #97999bdarkgray |
| Accent | #3b1126black | #3b1126black |
| Accent foreground | #e29cbeplum | #e29cbeplum |
| Destructive | #af3712firebrick | #e74818orangered |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #263b11darkgreen | #263b11darkgreen |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.43:1 | AAA |
| Text on card | 20.43:1 | AAA |
| Primary button | 6.23:1 | AA |
| Secondary button | 8.00:1 | AAA |
| Muted text | 4.11:1 | AA Large |
| Accent | 7.50:1 | AAA |
| Destructive | 6.19:1 | AA |
| Text on background | 19.78:1 | AAA |
| Text on card | 19.78:1 | AAA |
| Primary button | 6.23:1 | AA |
| Secondary button | 8.00:1 | AAA |
| Muted text | 5.53:1 | AA |
| Accent | 7.50:1 | AAA |
| Destructive | 3.93:1 | AA Large |
Paste this into your globals.css to use Fox in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.99 0.009 129.217);
--foreground: oklch(0 0 0);
--muted: oklch(0.887 0.018 249.832);
--muted-foreground: oklch(0.509 0.004 249.726);
--popover: oklch(0.99 0.009 129.217);
--popover-foreground: oklch(0 0 0);
--card: oklch(0.99 0.009 129.217);
--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.324 0.071 132.285);
--primary-foreground: oklch(0.773 0.172 132.34);
--secondary: oklch(0.262 0.049 251.597);
--secondary-foreground: oklch(0.789 0.063 250.345);
--accent: oklch(0.255 0.071 353.285);
--accent-foreground: oklch(0.771 0.094 349.033);
--destructive: oklch(0.51 0.163 36.067);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.324 0.071 132.285);
--chart-1: oklch(0.324 0.071 132.285);
--chart-2: oklch(0.262 0.049 251.597);
--chart-3: oklch(0.255 0.071 353.285);
--chart-4: oklch(0.292 0.057 251.735);
--chart-5: oklch(0.328 0.074 132.466);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.126 0.018 128.028);
--foreground: oklch(0.994 0.003 129.154);
--muted: oklch(0.253 0.024 250.473);
--muted-foreground: oklch(0.682 0.004 249.703);
--popover: oklch(0.126 0.018 128.028);
--popover-foreground: oklch(0.994 0.003 129.154);
--card: oklch(0.126 0.018 128.028);
--card-foreground: oklch(0.994 0.003 129.154);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.324 0.071 132.285);
--primary-foreground: oklch(0.773 0.172 132.34);
--secondary: oklch(0.262 0.049 251.597);
--secondary-foreground: oklch(0.789 0.063 250.345);
--accent: oklch(0.255 0.071 353.285);
--accent-foreground: oklch(0.771 0.094 349.033);
--destructive: oklch(0.624 0.202 35.83);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.324 0.071 132.285);
--chart-1: oklch(0.324 0.071 132.285);
--chart-2: oklch(0.262 0.049 251.597);
--chart-3: oklch(0.255 0.071 353.285);
--chart-4: oklch(0.292 0.057 251.735);
--chart-5: oklch(0.328 0.074 132.466);
}