Dark mode is not just light mode with the lightness inverted. Five years in, designers are still making the same five mistakes.
One: pure black backgrounds. #000000 is uncomfortable on OLED screens because the bloom around bright UI elements is too sharp. Use a near-black tinted with your brand hue — saturation 8, lightness 11 in HSL. The result feels intentional rather than absent. The 'dark' shade in the generator above does this automatically.
Two: full-saturation brand colors. A primary at #5B6CFF on a dark surface looks fine. The same color at #1F2BFF, fully saturated, glows like a UI bug. Drop saturation by 10 to 20 points for the dark variant of every brand color, or use a slightly lighter version. The contrast may stay similar, but the visual heaviness drops a lot.
Three: gray text instead of tinted text. The body color in dark mode should not be #cccccc. It should be the same hue as your dark surface, but inverted in lightness — so saturation 8, lightness 88. This costs nothing and makes the dark mode feel like part of the brand instead of a generic Material Design clone.
Four: not testing the accent. The accent color is the most likely thing to fail dark mode contrast. A bright orange accent that pops on white may turn into a glowing migraine on charcoal. Run the accent through the contrast table on both light and dark surfaces — if it fails 3:1 against the dark surface, generate a desaturated dark mode variant just for that role.
Five: a separate dark theme instead of dark variants. Maintaining two parallel themes is twice the work and twice the bugs. Use a token-based system where the same brand token has a light and a dark value, and let the build emit two CSS variable sets toggled by a media query or class.
The five-color base from the generator — primary, secondary, accent, light, dark — is the minimum scaffolding. Add light-and-dark variants of primary and accent specifically tuned for the opposite surface, and your dark mode stops being a chore.