Aching is a shadcn/ui theme built around a cyan primary color (#46a3ce) with muted light cyan accents (#cbd7dc). The light mode uses a neutral background (#f8fbfc). Dark mode keeps the cyan primary (#46a3ce) on a neutral background (#000000).
| Token | Light | Dark |
|---|---|---|
| Background | #f8fbfcghostwhite | #000000black |
| Foreground | #051014black | #f6f8f9whitesmoke |
| Card | #f4f9fbghostwhite | #030303black |
| Card foreground | #040c10black | #f9fafbghostwhite |
| Popover | #f8fbfcghostwhite | #000000black |
| Popover foreground | #051014black | #f6f8f9whitesmoke |
| Primary | #46a3cesteelblue | #46a3cesteelblue |
| Primary foreground | #000000black | #000000black |
| Secondary | #e3e6e8gainsboro | #272d30darkslategray |
| Secondary foreground | #454f54darkslategray | #bec7casilver |
| Muted | #e7eff3lavender | #0c1418black |
| Muted foreground | #52636bdimgray | #94a5addarkgray |
| Accent | #cbd7dclightgrey | #34444cdarkslategray |
| Accent foreground | #303f46darkslategray | #d1dbe0gainsboro |
| Destructive | #bf3f08firebrick | #f77036tomato |
| Destructive foreground | #ffffffwhite | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #46a3cesteelblue | #46a3cesteelblue |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 18.47:1 | AAA |
| Text on card | 18.52:1 | AAA |
| Primary button | 7.36:1 | AAA |
| Secondary button | 6.72:1 | AA |
| Muted text | 5.38:1 | AA |
| Accent | 7.41:1 | AAA |
| Destructive | 5.35:1 | AA |
| Text on background | 19.71:1 | AAA |
| Text on card | 19.78:1 | AAA |
| Primary button | 7.36:1 | AAA |
| Secondary button | 8.12:1 | AAA |
| Muted text | 7.30:1 | AAA |
| Accent | 7.17:1 | AAA |
| Destructive | 7.31:1 | AAA |
Paste this into your globals.css to use Aching in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.985 0.004 226.901);
--foreground: oklch(0.163 0.019 227.327);
--muted: oklch(0.948 0.01 226.987);
--muted-foreground: oklch(0.488 0.024 227.581);
--popover: oklch(0.985 0.004 226.901);
--popover-foreground: oklch(0.163 0.019 227.327);
--card: oklch(0.978 0.005 226.924);
--card-foreground: oklch(0.149 0.017 225.157);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.677 0.108 231.532);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.924 0.004 226.914);
--secondary-foreground: oklch(0.421 0.016 227.373);
--accent: oklch(0.871 0.014 227.063);
--accent-foreground: oklch(0.356 0.023 227.904);
--destructive: oklch(0.546 0.173 38.452);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.677 0.108 231.532);
--chart-1: oklch(0.677 0.108 231.532);
--chart-2: oklch(0.924 0.004 226.914);
--chart-3: oklch(0.871 0.014 227.063);
--chart-4: oklch(0.947 0.003 226.896);
--chart-5: oklch(0.68 0.112 231.907);
}
.dark {
--radius: 0.5rem;
--background: oklch(0 0 0);
--foreground: oklch(0.978 0.003 226.895);
--muted: oklch(0.185 0.014 228.185);
--muted-foreground: oklch(0.712 0.022 227.276);
--popover: oklch(0 0 0);
--popover-foreground: oklch(0.978 0.003 226.895);
--card: oklch(0.092 0 180);
--card-foreground: oklch(0.985 0.002 226.883);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.677 0.108 231.532);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.292 0.01 227.312);
--secondary-foreground: oklch(0.823 0.01 227.013);
--accent: oklch(0.376 0.025 227.925);
--accent-foreground: oklch(0.886 0.012 227.034);
--destructive: oklch(0.699 0.18 41.795);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.677 0.108 231.532);
--chart-1: oklch(0.677 0.108 231.532);
--chart-2: oklch(0.292 0.01 227.312);
--chart-3: oklch(0.376 0.025 227.925);
--chart-4: oklch(0.323 0.011 227.331);
--chart-5: oklch(0.68 0.112 231.907);
}