Unaware is a shadcn/ui theme built around a vivid light orange primary color (#fef4eb) with neutral gray accents (#d5d3d2). The light mode uses a neutral background (#fdfaf7). Dark mode keeps the vivid light orange primary (#fef4eb) on an orange-tinted background (#100905).
| Token | Light | Dark |
|---|---|---|
| Background | #fdfaf7snow | #100905black |
| Foreground | #0c0704black | #fcfaf8snow |
| Card | #fdfaf7snow | #100905black |
| Card foreground | #0c0704black | #fcfaf8snow |
| Popover | #fdfaf7snow | #100905black |
| Popover foreground | #0c0704black | #fcfaf8snow |
| Primary | #fef4ebseashell | #fef4ebseashell |
| Primary foreground | #4e2403maroon | #4e2403maroon |
| Secondary | #d5d3d2lightgrey | #292929darkslategray |
| Secondary foreground | #3d3a38darkslategray | #c2c2c2silver |
| Muted | #e5e3e0gainsboro | #1f1a1ablack |
| Muted foreground | #5a5653dimgray | #aca5a5darkgray |
| Accent | #d5d3d2lightgrey | #292929darkslategray |
| Accent foreground | #3d3a38darkslategray | #c2c2c2silver |
| Destructive | #6b1801maroon | #e93301orangered |
| Destructive foreground | #ffb39flightpink | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #fef4ebseashell | #fef4ebseashell |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.20:1 | AAA |
| Text on card | 19.20:1 | AAA |
| Primary button | 12.24:1 | AAA |
| Secondary button | 7.59:1 | AAA |
| Muted text | 5.66:1 | AA |
| Accent | 7.59:1 | AAA |
| Destructive | 6.98:1 | AA |
| Text on background | 18.94:1 | AAA |
| Text on card | 18.94:1 | AAA |
| Primary button | 12.24:1 | AAA |
| Secondary button | 8.18:1 | AAA |
| Muted text | 7.14:1 | AAA |
| Accent | 8.18:1 | AAA |
| Destructive | 4.23:1 | AA Large |
Paste this into your globals.css to use Unaware in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.985 0.005 60.216);
--foreground: oklch(0.134 0.014 67.832);
--muted: oklch(0.916 0.004 60.219);
--muted-foreground: oklch(0.457 0.007 60.072);
--popover: oklch(0.985 0.005 60.216);
--popover-foreground: oklch(0.134 0.014 67.832);
--card: oklch(0.985 0.005 60.216);
--card-foreground: oklch(0.134 0.014 67.832);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.972 0.016 60.061);
--primary-foreground: oklch(0.313 0.077 52.336);
--secondary: oklch(0.869 0.003 60.236);
--secondary-foreground: oklch(0.352 0.005 60.085);
--accent: oklch(0.869 0.003 60.236);
--accent-foreground: oklch(0.352 0.005 60.085);
--destructive: oklch(0.348 0.12 35.334);
--destructive-foreground: oklch(0.834 0.093 36.091);
--ring: oklch(0.972 0.016 60.061);
--chart-1: oklch(0.972 0.016 60.061);
--chart-2: oklch(0.869 0.003 60.236);
--chart-3: oklch(0.869 0.003 60.236);
--chart-4: oklch(0.893 0.002 60.246);
--chart-5: oklch(0.972 0.016 60.053);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.149 0.017 64.768);
--foreground: oklch(0.985 0.003 60.245);
--muted: oklch(0.222 0.008 17.771);
--muted-foreground: oklch(0.727 0.008 17.341);
--popover: oklch(0.149 0.017 64.768);
--popover-foreground: oklch(0.985 0.003 60.245);
--card: oklch(0.149 0.017 64.768);
--card-foreground: oklch(0.985 0.003 60.245);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.972 0.016 60.061);
--primary-foreground: oklch(0.313 0.077 52.336);
--secondary: oklch(0.28 0 180);
--secondary-foreground: oklch(0.813 0 165.964);
--accent: oklch(0.28 0 180);
--accent-foreground: oklch(0.813 0 165.964);
--destructive: oklch(0.609 0.222 33.383);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.972 0.016 60.061);
--chart-1: oklch(0.972 0.016 60.061);
--chart-2: oklch(0.28 0 180);
--chart-3: oklch(0.28 0 180);
--chart-4: oklch(0.311 0 180);
--chart-5: oklch(0.972 0.016 60.053);
}