Designing for Dark Mode — Making Apps Easy on the Eyes
How flipping your color palette can save battery, reduce eye strain, and make your app feel more modern.
What Is Dark Mode?
Dark mode is a setting in apps and websites that flips the colors around. Instead of having a bright white background with dark text, dark mode makes the background dark (usually dark gray or near-black) and the text light (white or light gray). It's the same app, just with reversed colors.
Most phones, computers, and websites have a dark mode option now. You can turn it on or off in your settings. Some apps even switch automatically — they follow the time of day, getting darker at night and brighter during the day. Apple's iOS, Android, Windows, and macOS all support system-wide dark mode that apps can listen to.
Why People Love Dark Mode
Dark mode is popular for good reasons. First, it can save battery on phones and laptops with OLED screens. OLED screens only light up the pixels that show color, so a dark background uses less power. Some tests show dark mode can save 30–50% battery on OLED phones.
Second, dark mode is easier on the eyes, especially at night or in dark rooms. Looking at a bright white screen in a dark room can feel like staring at a flashlight. Dark mode is gentler and reduces eye strain.
Third, dark mode just looks cool. Many people think dark interfaces feel more modern and stylish. That's why so many apps — Twitter, YouTube, Reddit, Discord — offer a dark mode option. If you're building a product, ignoring dark mode can make your app feel dated.
💡 Key Insight
Dark mode isn't just flipping colors from black to white. Good dark mode design uses specific shades of dark gray (not pure black) and carefully chosen off-white text so things still look good and stay easy to read. Just inverting colors usually creates harsh, ugly interfaces.
The Steps of Good Dark Mode Design
Designing for dark mode isn't just about changing colors. Here are the five steps that lead to a good dark mode experience:
Step 1 — Pick your dark colors: Use dark gray like #121212 or #1a1a1a for the background. Pure black can be too harsh on the eyes.
Step 2 — Adjust your text: Use off-white like #e0e0e0 instead of pure white. Pure white on dark backgrounds can be too bright and cause eye strain.
Step 3 — Reduce contrast on big things: Body text should have strong contrast for readability, but big blocks like cards and headers can use softer shades so they don't glow.
Step 4 — Tweak accent colors: Bright colors (like blue, green, red) often need to be slightly desaturated for dark mode. Neon-bright colors vibrate against dark backgrounds.
Step 5 — Add a toggle: Let users choose, or have your app follow the system setting automatically. Don't force dark mode on people who prefer light.
Adding Dark Mode with CSS
Here's a simple example of how to add dark mode to a website using CSS. The browser does most of the work — it checks if the user's device is set to dark mode and applies the styles automatically:
/* Default light mode styles */ body { background: #121212; color: #e0e0e0; } }
The prefers-color-scheme: dark part tells the browser: "If the user's device is set to dark mode, use these styles instead." Modern browsers and operating systems all support this. You can also add a manual toggle button with a little JavaScript that adds a class like .dark-mode to the <body> element. Best practice is to support both — let users choose, and respect their system setting by default.
Knowledge Check
Test what you learned with this quick quiz.