Color
Dark Mode
Dark mode is a theme built on a dark background instead of a light one, with color and brightness redesigned for a dark environment rather than simply inverted.
Definition
Dark mode is a theme that starts from a dark background instead of a light one. People often assume you can just invert the colors of a light theme and call it done, but a straight inversion almost always fails. The moment you flip a white background to black, the text, cards, shadows, and accent colors all end up looking different from what you intended. That's why dark mode is less about flipping colors and more about redesigning color and brightness from scratch for a dark environment. It helps to think of the light and dark themes as two separate outfits rather than one outfit turned inside out.
Why does it matter?
Dark mode reduces eye strain at night or in dim spaces, and it gives users a choice that matches their preference. These days operating systems support dark mode at the system level, so users naturally expect every app and site to follow their setting. But the more important payoff is that building a dark theme forces you to re-examine the hierarchy and color roles on your screen. On a light background you express depth with shadows, but on a dark background you have to express it through differences in surface brightness, which means you have to redefine which element is floating higher using color alone. Do this properly and the structure of your light theme gets sturdier too. Do a lazy inversion instead and text sinks into the background or accent colors glare painfully, leaving you with a screen that's actually harder to read than the light theme. So dark mode is less of an add-on feature and more of a training exercise that pushes your color skills up a level.
Common mistakes
- Leaving the background pure black (#000). Full black has too much contrast, which tires the eyes quickly, and shadows placed on top of it become invisible. A slightly lifted, deep gray background is far more comfortable.
- Carrying over the high-saturation colors from your light theme unchanged. On a dark background, the same color bleeds like a highlighter and glares. You need to lower both saturation and brightness for it to sit naturally.
- Making floating cards or modals darker than the background. In a dark theme, depth should be expressed by getting brighter, not darker. Reverse the direction and an element that should float on top instead looks like it has sunk into the screen.
Practical tips
- The higher a surface floats, the brighter it should be relative to the background. Keep a card brighter than the background and a modal above it one step brighter still, and the elevation reads naturally even without shadows.
- Use a slightly lifted deep gray for the background instead of pure black, and a mildly toned-down light gray for text instead of pure white. Softening the contrast just a touch keeps your eyes comfortable over long sessions.
- Don't reuse your light theme's accent value as-is; prepare a separate value with lower saturation or adjusted brightness. Managing each theme's colors independently keeps glare from creeping into either one.