Dark Mode in UX Design: A Shadow Play

In 2019, Apple introduced system-wide Dark Mode. Back then it was a trend. In 2026, it is a standard. Users expect their apps and websites to adapt to their environment. When you're lying in bed at night and open a snow-white website, it feels like an attack on the retina ("Flashbang Effect").

But many designers make the mistake: They take their white design, press "Invert", and call it done. The result? Horrible contrasts, black shadows on black backgrounds, and fatiguing eyes.

Designing true Dark Mode is its own discipline. It's about brightness hierarchies (Elevation), not colours.

Featured Snippet: Dark Mode Design requires specific colour palette adjustments. Important rules: 1. Never use pure black (#000000), but dark grey (#121212), to avoid "smearing". 2. Use brightness instead of shadows to create depth (Elevation). 3. Desaturate accent colours to reduce glare.

---

The Cost of Inaction: The Battery Drainer

Why do users love Dark Mode?

1. Eye Strain Relief: Less "blue light" in the evening.
2. Battery: On OLED screens (today's standard for smartphones), black pixels consume 0 power. A white website consumes up to 60% more battery at 100% brightness than a dark one.

If your app doesn't have Dark Mode, power users often uninstall it to save their battery. For websites, it's a sign of quality. "This company cares about details."

---

The Design Rules for Darkness

Don't Use Black.

Pure black (#000000) is too harsh. On OLED screens, pixels completely turn off at #000000. When you scroll quickly, the pixels "smear" (Black Smearing) because they need time to turn back on. Best Practice: Use a very dark grey, e.g. #121212 (Material Design Standard). This looks softer and more premium.

Elevation = Brightness

In Light Mode we use shadows (box-shadow) to show that a card "floats" above the background. In Dark Mode you don't see shadows (black on black). Solution: The higher an element floats, the brighter its background becomes.

• Background: #121212
• Card Level 1: #1E1E1E
• Card Level 2 (Modal): #2C2C2C

We work with light, not with shadow.

Desaturate Colors

A bright blue (#0000FF) that looks good on white causes optical flickering on dark grey. It's too glaring. Solution: Use pastel tones. Take your brand colour and mix 20-40% white in to make it softer.

---

Technical Implementation: CSS Variables

Forget separate stylesheets. Use CSS Custom Properties.

:root {
  --bg-primary: #ffffff;
  --text-primary: #333333;
}

@media (prefers-colour-scheme: dark) {
  :root {
    --bg-primary: #121212;
    --text-primary: #e0e0e0;
  }
}

body {
  background-colour: var(--bg-primary);
  colour: var(--text-primary);
}

With modern frameworks like Tailwind CSS it's even easier (dark:bg-grey-900). Important: Always offer a Toggle (switch) on the website. Some users have set their system to "Dark" but want to read texts on light (or vice versa). Respect the system setting (default) but allow an override.

---

Myth-Busting: "Dark Mode Is Better for the Eyes"

Not always. For people with astigmatism, white text on black background is harder to read ("Halation Effect" – the letters blur). That's why Dark Mode must never be mandatory. Choice is the real UX feature.

---

Unasked Question: "What Do I Do With Images?"

A bright white photo on a dark page ("Flashbang"). How to deal with it? Pro Tip: Apply a slight filter over images in Dark Mode via CSS.

@media (prefers-colour-scheme: dark) {
  img {
    filter: brightness(0.8) contrast(1.2);
  }
}

This dims the images slightly so they don't dazzle but preserves contrast. For logos (PNG with transparency) you often need two versions: A dark for light and a light for dark. Use the <picture> element for this.

---

FAQ: Dark Mode Engineering

---

Internal Linking

Related Articles:

• Conversion UX Psychology
• Accessibility First
• Whitespace in UI