Dark mode color palettes
Dark mode is not an inverted light theme. These palettes give you a background, a raised surface and an accent that still separates from both, which is where most dark themes fall apart.
- Night Sky
Readable text on #1c1f3b: #FFFFFF
- Crimson Depths
Readable text on #b3000c: #FFFFFF
- Urban Earth
Readable text on #4f3c3b: #FFFFFF
- Midnight Cat
Readable text on #121226: #FFFFFF
- Ichor Wine
Readable text on #230914: #FFFFFF
- Starlit Night
Readable text on #1b1f3b: #FFFFFF
- Raven
Readable text on #1d1d2b: #FFFFFF
- Night Sky (Gradient Colors)
Readable text on #1d243a: #FFFFFF
- Astro Novalite♡
Readable text on #433e48: #FFFFFF
- Midnight Blossoms
Readable text on #0d0d0d: #FFFFFF
- Wolf
Readable text on #9fa5b2: #111827
- Lunar Night
Readable text on #201e36: #FFFFFF
Building a dark theme from these
- Use the darkest colour for the page and the next one up for cards and menus. Elevation in dark mode is lightness, not shadow.
- Avoid pure white text. A light grey at around 87% opacity reads more comfortably over long sessions.
- Saturated colours vibrate on dark backgrounds. Desaturate the accent slightly rather than dimming it.
The text colour under each palette is whichever of near-black or white reaches the higher contrast ratio against its first colour — check any other pairing before using it for body text.