Ableton Dark is a shadcn/ui theme built around a vivid orange primary color (#ffcc71) with vivid light blue accents (#c9e4f8). The light mode uses a neutral background (#232323). Dark mode switches to a muted light purple primary (#eae1e8) on a purple-tinted background (#10050e).
| Token | Light | Dark |
|---|---|---|
| Background | #232323black | #10050eblack |
| Foreground | #d3d3d3lightgray | #faf9fasnow |
| Card | #292929darkslategray | #140611black |
| Card foreground | #fdfcfcsnow | #fdfcfdwhite |
| Popover | #1b1b1ablack | #10050eblack |
| Popover foreground | #fdfcfcsnow | #faf9fasnow |
| Primary | #ffcc71khaki | #eae1e8gainsboro |
| Primary foreground | #4a3322darkolivegreen | #5a3f55darkslategray |
| Secondary | #a6a6a6darkgray | #e8eae1beige |
| Secondary foreground | #23272adarkslategray | #1c1e15black |
| Muted | #0d0d0dblack | #171811black |
| Muted foreground | #dcdcdcgainsboro | #abada4darkgray |
| Accent | #c9e4f8lavender | #e1e8ealavender |
| Accent foreground | #114f7eteal | #3f555adarkslategray |
| Destructive | #f86230tomato | #f6372ccrimson |
| Destructive foreground | #000000black | #ffffffwhite |
| Border | #1c1917black | #201d1fblack |
| Input | #1c1917black | #201d1fblack |
| Ring | #f8ddc9bisque | #eae1e8gainsboro |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 10.49:1 | AAA |
| Text on card | 14.20:1 | AAA |
| Primary button | 7.90:1 | AAA |
| Secondary button | 6.16:1 | AA |
| Muted text | 14.19:1 | AAA |
| Accent | 6.49:1 | AA |
| Destructive | 6.76:1 | AA |
| Text on background | 19.08:1 | AAA |
| Text on card | 19.31:1 | AAA |
| Primary button | 7.22:1 | AAA |
| Secondary button | 13.86:1 | AAA |
| Muted text | 7.86:1 | AAA |
| Accent | 6.38:1 | AA |
| Destructive | 3.81:1 | AA Large |
Paste this into your globals.css to use Ableton Dark in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.256 0 180);
--foreground: oklch(0.866 0 180);
--muted: oklch(0.158 0 169.695);
--muted-foreground: oklch(0.894 0 180);
--popover: oklch(0.221 0.002 60.165);
--popover-foreground: oklch(0.992 0.001 60.275);
--card: oklch(0.281 0 180);
--card-foreground: oklch(0.992 0.001 60.275);
--border: oklch(0.217 0.007 59.845);
--input: oklch(0.217 0.007 59.845);
--primary: oklch(0.872 0.123 80.54);
--primary-foreground: oklch(0.343 0.043 58.12);
--secondary: oklch(0.724 0 180);
--secondary-foreground: oklch(0.27 0.009 240.726);
--accent: oklch(0.904 0.039 240.905);
--accent-foreground: oklch(0.414 0.099 247.052);
--destructive: oklch(0.681 0.194 37.941);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.915 0.04 59.675);
--chart-1: oklch(0.872 0.123 80.54);
--chart-2: oklch(0.724 0 180);
--chart-3: oklch(0.904 0.039 240.905);
--chart-4: oklch(0.749 0 158.199);
--chart-5: oklch(0.875 0.126 80.419);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.138 0.03 333.487);
--foreground: oklch(0.984 0.002 331.431);
--muted: oklch(0.205 0.014 116.101);
--muted-foreground: oklch(0.743 0.012 115.131);
--popover: oklch(0.138 0.03 333.487);
--popover-foreground: oklch(0.984 0.002 331.431);
--card: oklch(0.151 0.035 334.025);
--card-foreground: oklch(0.992 0.001 331.419);
--border: oklch(0.236 0.005 331.721);
--input: oklch(0.236 0.005 331.721);
--primary: oklch(0.919 0.013 331.611);
--primary-foreground: oklch(0.406 0.049 333.013);
--secondary: oklch(0.933 0.012 115.055);
--secondary-foreground: oklch(0.23 0.016 116.134);
--accent: oklch(0.927 0.008 212.669);
--accent-foreground: oklch(0.433 0.027 212.972);
--destructive: oklch(0.635 0.228 28.629);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.919 0.013 331.611);
--chart-1: oklch(0.919 0.013 331.611);
--chart-2: oklch(0.933 0.012 115.055);
--chart-3: oklch(0.927 0.008 212.669);
--chart-4: oklch(0.953 0.008 114.981);
--chart-5: oklch(0.918 0.016 331.647);
}