designing for dark mode
The video titled "Embracing Dark Mode: Design Tips and Techniques" covers several key insights about designing for dark mode:
- 🎨 Designing for dark mode involves creating a standalone design with its own elements and visual effects, rather than simply inverting colors.
- 🌑 The contrast and color adjustments needed for dark mode design can pose challenges for web accessibility.
- 🎨 The choice of colors in dark mode can significantly impact the contrast and visibility of buttons and other elements on the interface.
- 📊 The contrast ratio of black text on a white background or white text on a black background is 21 to 1, which significantly impacts readability.
- 🌑 Pure black for text or background can cause halation, making the text fuzzy and hard to read, especially for some visual conditions like astigmatism.
- 🎨 Muted colors in dark mode are just a bit darker and less saturated than their light mode counterparts.
- 🌑 Dark mode makes colors appear brighter on a dark background, creating the illusion of contrast and muted colors.
- 🌑 The whole point of using dark mode is to keep things minimal and focus only on the important information.
For a more detailed summary, you can check the full summary here.
Some more notes
When done well, dark themes have many benefits. They reduce eyestrain. They are easier to read in low light. And, depending on the screen, they can greatly reduce battery consumption.
- Darken distant surfaces
When creating a dark theme, it can be tempting to invert an existing light theme. However, distant surfaces would become light and near surfaces would become dark. This would break physicality and feel unnatural.
Instead, take only the main surface color of your light theme. Invert this color to produce the main surface color of your dark theme. Lighten this color for nearer surfaces, and darken this color for distant surfaces.
- Revisit perceptual contrast
When designing a dark theme by referring to a light theme, it is important to revisit perceptual contrast. This is how much contrast an element appears to have, regardless of what the numbers may suggest.
- Reduce large blocks of bright color
In light themes, we often use large blocks of bright color. This is usually fine: our most important elements are likely to be brighter still. But in dark themes, it does not work: large blocks of color pull focus from our most important elements.
- Avoid pure black or white
4.1. Realism
True black does not exist in our daily environment.
Our vision has therefore adapted to perceive relative darkness as true black. This is why #000000 can feel so jarring, especially when set against lighter elements. It does not match anything we normally see.
4.2. Black smearing
Black smearing is a visual distortion that occurs when lighter content is dragged or scrolled across pure black backgrounds.
You can avoid black smearing by using dark gray, as then pixels will not turn off. This even works with a gray as dark as #010101 — and still uses much less energy than a light theme!
4.3. Depth
If you use true black in background elements, you lose certain techniques to convey depth.
If your background is not pure black, you can use shadows with different opacities and blur to convey depth.
4.4. Halation
when designing dark themes, it is important to be mindful of contrast ratios that are exceedingly high. Contrast that is too high can cause eye fatigue as well as halation.
When very bright text is set against a very dark background, the text can appear to bleed into the background. This effect is even stronger for those of us with astigmatism.
- Deepen colors
Since we toned down our text to avoid eye fatigue and halation, our colored accents and buttons may appear too bright. We now have to adjust these colors to work better in a dark theme. First, we reduce lightness so these colors do not overpower nearby text. Second, we increase saturation so they still have character.
Conclusion
We found a systematic way to build dark themes that are readable, balanced, and delightful. Just follow these steps:
- Darken distant surfaces
- Revisit perceptual contrast
- Reduce large blocks of bright color
- Avoid pure black or white
- Deepen colors
Sources: