Dark Mode Design: It Is Not Just Inverting Colors
A good dark mode is not a color inversion of the light theme. Here is what I have learned designing dark modes that actually work. Dark mode is often treated as a simple color inversion: swap light backgrounds for dark ones, dark text for light, and ship it. The result is usually wrong. Colors that look good on white look harsh on black. Shadows that add depth in light mode disappear in dark mode. Contrast relationships shift. After designing dark modes for many projects, I have learned that a good dark mode requires its own design decisions, not an inversion. Here is what I have learned. Do Not Use Pure Black The most common mistake is using pure black, #000000, as the background. Pure black produces maximum contrast with white text, which is harsh and fatiguing to read, especially in low ambient light. It also makes shadows invisible, since shadows darken what is already the darkest possible value. I use a very dark gray, around #121212 or #1a1a1a, as the base background. This retains enough light for shadows to register and softens the contrast to a comfortable level. For elevated surfaces like cards and modals, I use a slightly lighter gray, around #1e1e1e or #242424. More guides are on the Spark Blog.