Dark Mode Design: How to Build a Working Dark Theme

Why Dark Mode?

Android UX report: 81.9% of users prefer dark mode. The benefits include: - Less eye strain (especially at night) - Saves battery life (OLED screens) - Modern aesthetic - Better focus

Common Mistakes

1. Pure Black (#000000) The contrast is too high. Use **very dark grey** (#0F0F0F – #1A1A1A).

2. Pure White Text The same problem in reverse. Use off-white (#E5E5E5).

3. Identical Colour Saturation Colours that worked on white look too bright in dark mode. **Reduce saturation** by ~20%.

4. Missing Shadows Box-shadows don't work in dark mode – use **subtle borders** to create elevation.

5. Non-Adjusted Images Bright images pop out too much. Use a CSS filter:

@media (prefers-color-scheme: dark) {
  img { filter: brightness(.8) contrast(1.2); }
}

Creating a Colour System

Surfaces (Backgrounds) ```css --surface-base: #0F0F0F; /* page */ --surface-1: #1A1A1A; /* cards */ --surface-2: #242424; /* elevated */ --surface-3: #2E2E2E; /* dialogues */ ```

Text ```css --text-primary: #FFFFFF; /* 87% opacity */ --text-secondary: #B3B3B3; /* 60% opacity */ --text-disabled: #666666; /* 38% opacity */ ```

Accents Reduce saturation vs light mode: ```css /* Light */ --accent: #2DD4BF; /* Dark */ --accent: #5EEAD4; /* lighter, less saturation */ ```

Implementation

Using CSS Variables ```css :root { --bg: #ffffff; --text: #0a0a0a; } [data-theme='dark'] { --bg: #0f0f0f; --text: #e5e5e5; } ```

By System Preference ```css @media (prefers-color-scheme: dark) { :root { --bg: #0f0f0f; --text: #e5e5e5; } } ```

Toggle Save the choice in localStorage to remember visits.

Contrast Requirements

WCAG AA still applies in dark mode: - Normal text: 4.5:1 - Large text: 3:1

Test: WebAIM Contrast Checker.

Components in Dark Mode

Buttons - Primary: light colour on a dark background - Secondary: outlined (border + transparent) - Ghost: appearing on hover

Forms - Input border: subtle (--surface-2) - Focus state: brand colour glow - Placeholder: --text-disabled

Images - Reduce brightness - Increase contrast - Logo: light variant (white logo for dark backgrounds)

Mobile

iOS and Android have supported dark mode for 5+ years. The web should follow suit: - meta theme-color: dynamic - iOS PWA: status bar style

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">

Testing

• Chrome DevTools → Rendering → Emulate CSS prefers-color-scheme
• Firefox: about:config
• Physical devices (iOS Settings → Display)

Examples from the Estonian Market

Well-executed dark modes: - Wise - Bolt - Pipedrive

Summary

A good dark mode takes about 30% of the total design effort but provides 81% of users with a better experience. We offer websites with dark mode as standard – ask for a quote.

Sources

• Material Design – Dark Theme
• Apple HIG – Dark Mode
• Web.dev – prefers-color-scheme