Dark Mode Implementation

Learn to implement responsive dark/light mode with CSS and JavaScript.

What is Dark Mode?

User Experience

  • • Reduces eye strain in low-light environments
  • • Conserves battery on OLED screens
  • • Enhances accessibility for visually impaired users

Technical Aspects

  • • CSS prefers-color-scheme media query
  • • Dynamic class toggling with JavaScript
  • • Persistent user preferences via localStorage

Implementation Techniques

CSS Variables

:root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #0f0f0f;
        --text-color: #e0e0e0;
    }
}

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

JavaScript Toggle

function toggleDarkMode() {
    const body = document.body;
    body.classList.toggle('dark');
    
    // Store preference
    if (body.classList.contains('dark')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
}

Live Theme Toggle Demo

Theme Switcher

Current Theme: Detected

This is a sample text block that changes color based on theme.

Advanced Techniques

System Preference Detection

Use media queries to respect user's OS settings:

@media (prefers-color-scheme: dark) { /* styles */ }

Smooth Transitions

Add CSS transitions for theme switches:

body {
    transition: background 0.5s, color 0.5s;
}

Color Contrast Checks

Ensure text/background contrast ratios meet WCAG standards

WCAG AA: 4.5:1 | AAA: 7:1