Themes / Midnight
Midnight theme
A bright sky-blue brand colour with strong outlines. Built to look best in dark mode. Tune it below, check it in light and dark, then install it.
Start from a preset
Twelve themes, each checked for contrast in light and dark. Pick one, then make it yours below.
Customise
Midnight
The five chart colours, in order.
Enter a full email address.
The quick brown fox jumps over the lazy dog
Body text in the muted colour: contrast is measured for this pairing, on the page and on muted surfaces.
Menus and dialogs open outside the preview, so they are left out. In your app they follow the same tokens.
Use it
$ pnpm dlx shadcn@latest add @ballmac/theme-midnightThis is the Midnight preset, so it installs by name. The command writes the tokens into your globals.css.
Contrast
32 of 32 checks pass
Every text and graphic pairing the components use, measured against WCAG: 4.5:1 for text, 3:1 for focus rings and chart colours. The builder moves lightness for you, so the result stays readable at any hue.
| Pairing | Light | Dark | Needs |
|---|---|---|---|
| Text on page | 19.1:1 | 17.8:1 | 4.5:1 |
| Text on cards | 19.1:1 | 16.6:1 | 4.5:1 |
| Text in popovers | 19.1:1 | 16.6:1 | 4.5:1 |
| Button text | 4.5:1 | 8.7:1 | 4.5:1 |
| Primary used as text | 4.8:1 | 8.7:1 | 4.5:1 |
| Secondary button text | 16.4:1 | 14.7:1 | 4.5:1 |
| Muted text on page | 6.0:1 | 7.8:1 | 4.5:1 |
| Muted text on muted | 5.4:1 | 6.5:1 | 4.5:1 |
| Text on accent | 15.9:1 | 13.3:1 | 4.5:1 |
| Destructive text | 5.2:1 | 5.7:1 | 4.5:1 |
| Focus ring | 3.5:1 | 6.4:1 | 3:1 |
| Chart 1 | 3.8:1 | 7.5:1 | 3:1 |
| Chart 2 | 3.3:1 | 8.5:1 | 3:1 |
| Chart 3 | 3.0:1 | 10.0:1 | 3:1 |
| Chart 4 | 4.0:1 | 7.1:1 | 3:1 |
| Chart 5 | 3.4:1 | 8.3:1 | 3:1 |
Tokens
Light