Module 22: Dark Mode — Design & Code Foundations

09

undefined

Theme Options

Print

Fixed

One version

Single printed version, can't change

Web

Dynamic

User choice

Light/dark/auto based on preference

Color Model

Print

CMYK

Ink on paper

White paper is default 'background'

Web

RGB

Light emission

Screen can be any color, including black

Reading Context

Print

Daylight assumed

Fixed lighting

Designed for well-lit environments

Web

Any lighting

Adaptive

Dark mode for low-light use

Cost

Print

Ink costs

Dark = expensive

Dark backgrounds use more ink

Web

OLED savings

Dark = efficient

Dark saves battery on OLED screens

10

undefined

Vision Science

undefined

Halation Effect

undefined

OLED Benefits

undefined

11

Dark Mode Done Right

How top products implement dark mode.

Multiple themes

Light, dark, and high contrast

Principles Identified:

Choice Three themes plus custom colors

Accessibility High contrast option for low vision

Brand Accent colors remain vibrant

Key insight: Slack offers multiple dark themes to accommodate different preferences and needs.

Dimmed colors

Syntax highlighting adjusted

Principles Identified:

Code-focused Syntax colors tuned for dark

Elevation Lighter surfaces for depth

Consistency Every page tested in dark

Key insight: GitHub's dimmed dark mode reduces eye strain during long coding sessions.

Dim & Lights Out

Two darkness levels

Principles Identified:

Options Dim (blue-gray) vs Lights Out (black)

OLED True black option for battery saving

Media Images pop against dark backgrounds

Key insight: Twitter offers both comfortable dark gray and true black for OLED users.

12

Dark Mode Mistakes

Common errors that hurt the dark mode experience.

Failure: Pure Black Background

Pure black #000

Harsh, causes halation

Fix: Use dark gray instead

Dark gray #111827

Comfortable contrast

Rule: Use #111827 or similar dark gray. Reserve pure black for OLED optimization only.

Failure: Saturated Colors

Fully saturated

Vibrates on dark

Fix: Reduce saturation for dark backgrounds

Lighter, desaturated

Comfortable

Rule: Reduce saturation 10-20% for dark mode. Lighter variants often work better.

Failure: Flash of Light Theme

Page loads light → then switches to dark

Jarring flash

Fix: Load theme preference before rendering

Theme applied before first paint

Smooth experience

Rule: Use blocking script in to set theme before CSS loads.

Failure: Shadows for Elevation

Shadow invisible

Fix: Use lighter surfaces instead

Lighter surface

Rule: In dark mode, elevation = lighter background, not shadows.

13

Dark Mode Testing

Validate your dark mode implementation.

01

Low-Light Test

Tests: Comfort

View your site in a dark room for 5+ minutes. Is it comfortable? Does any element cause eye strain? Check for halation on text.

🌙

Test in actual low light

02

Contrast Audit

Tests: Accessibility

Check WCAG contrast ratios for all text. Dark mode often fails contrast checks. Aim for 4.5:1 for normal text, 3:1 for large text.

Normal text: 4.5:1 ✓

Large text: 3:1 ✓

Subtle text: 3:1+ needed

03

Image Audit

Tests: Visual consistency

Review every image in dark mode. Do bright images flash? Are logos visible? Do illustrations work on dark backgrounds?

☑ Photos adjusted

☑ Logos visible

☑ Icons adapt

04

Flash Prevention Test

Tests: Performance

Load page with dark mode preference set. Is there any flash of light theme? Check on slow connections.

Throttle to 3G

Reload with dark pref

No flash = pass

14

Dark Mode Implementation

Production-ready CSS for dark mode.

:root {
  --color-bg: #ffffff;
  --color-surface: #f9fafb;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-primary: #3b82f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111827;
    --color-surface: #1f2937;
    --color-text: #f9fafb;
    --color-text-muted: #9ca3af;
    --color-primary: #60a5fa;
  }
}

CSS Custom Properties via CSS

prefers-color-scheme - Detects system preference
Semantic names - Same tokens, different values
Lighter primary - Colors adjusted for dark

Tip: All CSS uses token names. Theme changes only affect :root values.

/* Data attribute approach */
[data-theme="dark"] {
  --color-bg: #111827;
  --color-text: #f9fafb;
}

/* JavaScript toggle */
function setTheme(theme) {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem('theme', theme);
}

/* Load saved preference */
const theme = localStorage.getItem('theme') ||
  (matchMedia('(prefers-color-scheme: dark)').matches
    ? 'dark' : 'light');
setTheme(theme);

Manual Toggle via CSS

data-theme attribute - Easy to toggle in JS
localStorage - Persists user choice
Fallback to system - Respects OS if no choice

Tip: Put theme detection script in to prevent flash.

/* Reduce brightness slightly */
@media (prefers-color-scheme: dark) {
  img:not([src*=".svg"]) {
    filter: brightness(0.9) contrast(0.95);
  }
}

/* Dark mode logo swap */
.logo-light { display: block; }
.logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  .logo-light { display: none; }
  .logo-dark { display: block; }
}

Image Handling via CSS

filter - Subtle brightness reduction
Excludes SVG - SVGs adapt via currentColor
Logo swap - Different assets per theme

Tip: Use element for cleaner logo swapping.

:root {
  --surface-1: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: #1f2937;
    --surface-2: #374151;
    --surface-3: #4b5563;
  }
}

.card {
  background: var(--surface-1);
}

.modal {
  background: var(--surface-2);
}

Elevation System via CSS

Surface levels - Increasing lightness
Light: shadows - Dark: lighter surfaces
Semantic usage - Modal higher than card

Tip: Higher elevation = lighter surface in dark mode (opposite of shadows).

15

Self-Assessment

Test your understanding of dark mode implementation.

Q1

Why shouldn't you use pure black (#000) for dark mode backgrounds?

Click to reveal

Q2

How do you handle elevation in dark mode?

Click to reveal

Q3

What is FOUC and how do you prevent it?

Click to reveal

Dark Mode

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

Dark Mode Done Right

Common Failures

Dark Mode Mistakes

Visual Tests

Dark Mode Testing

Low-Light Test

Contrast Audit

Image Audit

Flash Prevention Test

CSS Implementation

Dark Mode Implementation

Self-Assessment

Self-Assessment