Weather is a shadcn/ui theme built around a vivid deep green primary color (#102d01) with vivid deep violet accents (#1e012d). The light mode uses a neutral background (#ffffff). Dark mode keeps the vivid deep green primary (#102d01) on a neutral background (#040802).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #040802black |
| Foreground | #0a1504black | #f6faf4whitesmoke |
| Card | #ffffffwhite | #040802black |
| Card foreground | #0a1504black | #f6faf4whitesmoke |
| Popover | #ffffffwhite | #040802black |
| Popover foreground | #0a1504black | #f6faf4whitesmoke |
| Primary | #102d01black | #102d01black |
| Primary foreground | #56f207lawngreen | #56f207lawngreen |
| Secondary | #1e012dblack | #1e012dblack |
| Secondary foreground | #c966faorchid | #c966faorchid |
| Muted | #e8ddeelavender | #1c1122black |
| Muted foreground | #4b3d52darkslategray | #bbadc2silver |
| Accent | #1e012dblack | #1e012dblack |
| Accent foreground | #c966faorchid | #c966faorchid |
| Destructive | #92360csaddlebrown | #ed6526chocolate |
| Destructive foreground | #fce1d5antiquewhite | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #102d01black | #102d01black |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 18.71:1 | AAA |
| Text on card | 18.71:1 | AAA |
| Primary button | 10.14:1 | AAA |
| Secondary button | 6.15:1 | AA |
| Muted text | 7.66:1 | AAA |
| Accent | 6.15:1 | AA |
| Destructive | 6.09:1 | AA |
| Text on background | 19.10:1 | AAA |
| Text on card | 19.10:1 | AAA |
| Primary button | 10.14:1 | AAA |
| Secondary button | 6.15:1 | AA |
| Muted text | 8.56:1 | AAA |
| Accent | 6.15:1 | AA |
| Destructive | 6.50:1 | AA |
Paste this into your globals.css to use Weather in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.18 0.038 134.938);
--muted: oklch(0.911 0.026 314.686);
--muted-foreground: oklch(0.382 0.04 314.314);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.18 0.038 134.938);
--card: oklch(1 0 180);
--card-foreground: oklch(0.18 0.038 134.938);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.263 0.077 136.988);
--primary-foreground: oklch(0.845 0.268 139.464);
--secondary: oklch(0.182 0.086 311.826);
--secondary-foreground: oklch(0.687 0.223 312.773);
--accent: oklch(0.182 0.086 311.826);
--accent-foreground: oklch(0.687 0.223 312.773);
--destructive: oklch(0.459 0.134 41.004);
--destructive-foreground: oklch(0.928 0.034 46.479);
--ring: oklch(0.263 0.077 136.988);
--chart-1: oklch(0.263 0.077 136.988);
--chart-2: oklch(0.182 0.086 311.826);
--chart-3: oklch(0.182 0.086 311.826);
--chart-4: oklch(0.215 0.104 310.765);
--chart-5: oklch(0.265 0.079 137.007);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.126 0.022 133.138);
--foreground: oklch(0.981 0.009 134.871);
--muted: oklch(0.201 0.038 313.865);
--muted-foreground: oklch(0.766 0.034 314.612);
--popover: oklch(0.126 0.022 133.138);
--popover-foreground: oklch(0.981 0.009 134.871);
--card: oklch(0.126 0.022 133.138);
--card-foreground: oklch(0.981 0.009 134.871);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.263 0.077 136.988);
--primary-foreground: oklch(0.845 0.268 139.464);
--secondary: oklch(0.182 0.086 311.826);
--secondary-foreground: oklch(0.687 0.223 312.773);
--accent: oklch(0.182 0.086 311.826);
--accent-foreground: oklch(0.687 0.223 312.773);
--destructive: oklch(0.669 0.183 42.067);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.263 0.077 136.988);
--chart-1: oklch(0.263 0.077 136.988);
--chart-2: oklch(0.182 0.086 311.826);
--chart-3: oklch(0.182 0.086 311.826);
--chart-4: oklch(0.215 0.104 310.765);
--chart-5: oklch(0.265 0.079 137.007);
}