🌓 Module 5: Dark Mode Design

What Is Dark Mode?

Dark mode uses dark backgrounds with light text—great for low light environments or saving battery. It's like switching from a bright room to a cozy lamp—easier on the eyes at night.

How It Works

This demo uses CSS custom properties (variables) that change when a data-theme="dark" attribute is applied to the HTML element. The colors smoothly transition thanks to CSS transitions.

/* Define color variables for both themes */
:root {
  --bg-primary: #ffffff;
  --text-primary: #212529;
  --accent: #667eea;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --text-primary: #e9ecef;
  --accent: #8b9eff;
}

/* Use variables in your styles */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

Why Use Dark Mode?

👁️ Reduced Eye Strain

Easier on eyes in low-light conditions, especially at night or in dark rooms.

🔋 Battery Saving

OLED screens use less power when displaying dark colors, extending battery life.

😎 User Preference

Many users prefer dark interfaces. Offering a choice shows you respect preferences.

🎨 Modern Aesthetic

Dark mode is trendy and can make designs feel more premium and sophisticated.

82% Users prefer dark mode at night
63% Battery saved on OLED displays
95% Of apps now offer dark mode

Implementation Methods

✅ Manual Toggle (This Demo)

  • User explicitly chooses
  • Preference saved in localStorage
  • Works across all browsers
  • Simple to implement

✅ Auto-Detect System Preference

  • Respects OS settings
  • No UI needed
  • Better UX for most users
  • Can be combined with manual toggle

Auto-Detection with CSS

Modern browsers can detect the user's system preference using the prefers-color-scheme media query:

/* Automatically apply dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --text-primary: #e9ecef;
  }
}

/* JavaScript to detect preference */
const prefersDark = window.matchMedia(
  '(prefers-color-scheme: dark)'
).matches;

if (prefersDark) {
  document.documentElement.setAttribute(
    'data-theme', 'dark'
  );
}

Design Considerations

✅ Best Practices

  • Use true blacks sparingly (#000 can be harsh)
  • Prefer dark grays (#1a1a1a, #2d2d2d)
  • Maintain color contrast ratios (WCAG)
  • Reduce saturation in dark mode
  • Test on actual devices
  • Smooth transitions between modes

⚠️ Watch Out For

  • Can be harder to read in bright light
  • Images may need adjustment
  • Colors appear different on dark backgrounds
  • Some users have light sensitivity
  • Must design for both modes
  • Double the design work
Atelier Reflection: When would you use dark mode? How does it affect mood and readability on this page? Toggle between modes multiple times—which do you prefer and why? Consider different times of day and lighting conditions. Does the transition feel smooth and pleasant, or jarring?

Color Contrast in Dark Mode

Dark mode isn't just inverting colors! You need to carefully adjust contrast:

Complete Implementation Example

// Save preference to localStorage
function toggleTheme() {
  const html = document.documentElement;
  const current = html.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  
  html.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
}

// Load saved preference on page load
function loadTheme() {
  const saved = localStorage.getItem('theme');
  const prefersDark = window.matchMedia(
    '(prefers-color-scheme: dark)'
  ).matches;
  
  const theme = saved || (prefersDark ? 'dark' : 'light');
  document.documentElement.setAttribute('data-theme', theme);
}

// Run on page load
loadTheme();
Critical Design Question: Is dark mode truly enhancing accessibility for all users? While it helps many, some users with astigmatism or dyslexia find dark mode harder to read. Are you providing an easy way to switch? The methodology emphasizes inclusive design—have you considered all user needs, not just the majority preference?

Try It Yourself!

🎨 ¿Quieres ver el Camino C?

Explora el enfoque Checkbox + CSS (método CSS puro) en una demo separada:

Ver Demo del Camino C →