Dark Mode Color Palette: Text, Surfaces, and Contrast
2026-09-14 · zhoujingkang · Founder
Dark mode is not a color inversion. It is a separate mapping of surfaces, text, borders and accents that must preserve hierarchy without turning every surface into black or every accent into neon.
Layer surfaces before accents
Use a small lightness ladder for the page, cards and elevated elements. Subtle separation is usually more comfortable than heavy borders, while the primary accent should remain reserved for actions and focus.
Protect text hierarchy
Use a strong text token for body copy, a muted token for supporting copy and a subtle token only where the size and context allow it. Check both ratio and APCA results on the actual dark surfaces.
Generate and test the theme
The Brand Theme Engine maps one brand color into light and dark semantic tokens, previews real UI and flags failed pairings. Use the contrast checker when you need to inspect one troublesome combination.
Continue with a tool
References
FAQ
Should dark mode invert every color?
No. Re-map roles for dark surfaces and keep the brand accent recognizable; a literal inversion usually breaks hierarchy and contrast.
How do I validate a dark palette?
Check text/background pairs with WCAG and APCA, then inspect buttons, borders, disabled states and focus rings in a real UI preview.
Try it on your own brand color
Paste one hex into the Brand Theme Engine and get a full light & dark web theme — semantic tokens, contrast-checked, export-ready.
Open the Brand Theme Engine →