Medium is a shadcn/ui theme built around a vivid pink primary color (#ff0f77) with vivid red accents (#ff1f0f). The light mode uses a neutral background (#ffffff). Dark mode keeps the vivid pink primary (#ff0f77) on a neutral background (#000000).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #000000black |
| Foreground | #100409black | #ffffffwhite |
| Card | #fcfcfcsnow | #030303black |
| Card foreground | #0c0307black | #ffffffwhite |
| Popover | #ffffffwhite | #000000black |
| Popover foreground | #100409black | #ffffffwhite |
| Primary | #ff0f77deeppink | #ff0f77deeppink |
| Primary foreground | #ffffffwhite | #ffffffwhite |
| Secondary | #ff0fefmagenta | #ff0fefmagenta |
| Secondary foreground | #ffffffwhite | #ffffffwhite |
| Muted | #f0eaf0whitesmoke | #150f15black |
| Muted foreground | #4f3b4edarkslategray | #c4b0c3silver |
| Accent | #ff1f0fred | #ff1f0fred |
| Accent foreground | #ffffffwhite | #ffffffwhite |
| Destructive | #c14401firebrick | #fe6d20tomato |
| Destructive foreground | #ffffffwhite | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #ff0f77deeppink | #ff0f77deeppink |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.12:1 | AAA |
| Text on card | 19.91:1 | AAA |
| Primary button | 3.75:1 | AA Large |
| Secondary button | 3.19:1 | AA Large |
| Muted text | 8.57:1 | AAA |
| Accent | 3.84:1 | AA Large |
| Destructive | 5.13:1 | AA |
| Text on background | 21.00:1 | AAA |
| Text on card | 20.67:1 | AAA |
| Primary button | 3.75:1 | AA Large |
| Secondary button | 3.19:1 | AA Large |
| Muted text | 9.32:1 | AAA |
| Accent | 3.84:1 | AA Large |
| Destructive | 7.43:1 | AAA |
Paste this into your globals.css to use Medium in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.135 0.026 350.39);
--muted: oklch(0.944 0.011 327.655);
--muted-foreground: oklch(0.381 0.042 328.579);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.135 0.026 350.39);
--card: oklch(0.992 0 161.565);
--card-foreground: oklch(0.121 0.023 348.68);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.646 0.255 5.581);
--primary-foreground: oklch(1 0 180);
--secondary: oklch(0.695 0.31 331.875);
--secondary-foreground: oklch(1 0 180);
--accent: oklch(0.636 0.25 29.756);
--accent-foreground: oklch(1 0 180);
--destructive: oklch(0.555 0.171 40.715);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.646 0.255 5.581);
--chart-1: oklch(0.646 0.255 5.581);
--chart-2: oklch(0.695 0.31 331.875);
--chart-3: oklch(0.636 0.25 29.756);
--chart-4: oklch(0.699 0.305 331.635);
--chart-5: oklch(0.651 0.258 6.177);
}
.dark {
--radius: 0.5rem;
--background: oklch(0 0 0);
--foreground: oklch(1 0 180);
--muted: oklch(0.178 0.016 328.389);
--muted-foreground: oklch(0.78 0.035 327.983);
--popover: oklch(0 0 0);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.092 0 180);
--card-foreground: oklch(1 0 180);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.646 0.255 5.581);
--primary-foreground: oklch(1 0 180);
--secondary: oklch(0.695 0.31 331.875);
--secondary-foreground: oklch(1 0 180);
--accent: oklch(0.636 0.25 29.756);
--accent-foreground: oklch(1 0 180);
--destructive: oklch(0.705 0.194 43.722);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.646 0.255 5.581);
--chart-1: oklch(0.646 0.255 5.581);
--chart-2: oklch(0.695 0.31 331.875);
--chart-3: oklch(0.636 0.25 29.756);
--chart-4: oklch(0.699 0.305 331.635);
--chart-5: oklch(0.651 0.258 6.177);
}