Designing Dark Mode Without Doubling the Work
By Maksym Bardakh · Co-founder & President
In short
Dark mode done badly means maintaining two parallel designs. Done well, it means defining colors by their role rather than their value, so a single semantic system resolves to the right color in each mode. Dark mode is not an inversion of light mode; it needs adjusted contrast, desaturated colors, and elevation expressed through lighter surfaces rather than shadows. The work is in the tokens, not in duplicating screens.
Not an inversion
The first misconception is that dark mode is light mode with the colors flipped. Inverting a light theme produces harsh, over-bright surfaces and colors that vibrate uncomfortably against dark backgrounds. Dark mode has its own requirements: pure black is rarely ideal because it makes shadows and depth impossible to express, and saturated colors that work on white become glaring on dark surfaces and need to be toned down.
Treating dark mode as a distinct visual problem, rather than a mechanical transformation, is what separates a comfortable dark theme from one that users find harsh and switch away from.
Color by role, not by value
The way to support two modes without maintaining two designs is to stop referring to colors by their literal value and start referring to them by their role. A component asks for the surface color or the primary text color, not for a specific shade. Each role then resolves to the appropriate value in light or dark mode. This is the difference between a system that adapts and a set of screens that must each be redrawn.
- Define semantic roles such as background, surface, primary text, and accent.
- Map each role to a concrete value per mode in one place.
- Have components reference roles, never literal color values.
Contrast, saturation, and elevation
Dark mode changes how several things must be handled. Contrast ratios still need to meet accessibility thresholds, but the comfortable range differs against dark backgrounds, where maximum-contrast white text can be fatiguing for long reading. Saturated accent colors usually need to be desaturated to sit calmly on dark surfaces. And elevation, conveyed by shadows in light mode, is better expressed in dark mode by making higher surfaces lighter, since shadows are nearly invisible on dark backgrounds.
Key takeaways
- Dark mode is a distinct design problem, not an inversion of the light theme.
- Define colors by semantic role so one system resolves correctly in each mode.
- Pure black and undiluted saturated colors are usually wrong for dark surfaces.
- Express elevation through lighter surfaces rather than shadows in dark mode.
- Check contrast separately in both modes; the comfortable range differs.
Frequently asked questions
- Is dark mode just light mode with inverted colors?
- No. Inversion produces harsh surfaces and vibrating colors. Dark mode needs adjusted contrast, desaturated colors, and elevation expressed through lighter surfaces.
- How do I support both modes without maintaining two designs?
- Refer to colors by semantic role rather than literal value, and map each role to a concrete color per mode in one place.
- Why avoid pure black backgrounds?
- Pure black makes depth and elevation hard to express, and maximum-contrast text on it can be fatiguing for long reading sessions.
References
About the author
Maksym Bardakh
Co-founder & President
Maksym is a software engineer and product strategist focused on executive-function and behavioral system design. At BBMM he leads product direction across Flowo, TextPack, and Pillow, working at the intersection of human cognition and durable interface design.