Why Dark Mode Has Become a Web Design Standard

Dark mode is no longer a niche preference — it is a mainstream expectation. According to a 2023 Android Authority survey, over 80% of smartphone users prefer dark mode on their devices. Major platforms like YouTube, Twitter/X, GitHub, and Slack all offer it natively.

For website owners, this shift is impossible to ignore. Users now expect the same level of visual comfort from the websites they visit. Implementing a dark theme is not just about aesthetics; it is about performance, accessibility, and user retention.

On OLED and AMOLED screens, dark mode can reduce energy consumption by up to 60% (Google confirmed this at Android Dev Summit). It also reduces eye strain in low-light environments, making your content more comfortable to read at night.

The Technical Foundation: CSS Custom Properties

The cleanest way to implement dark mode starts with CSS custom properties (also known as CSS variables). They allow you to define your color palette once and switch it effortlessly.

Step 1: Define Your Color Schemes

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

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --accent-color: #4da6ff;
}

Then apply these variables throughout your stylesheet:

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

Step 2: Respect the User’s System Preference

The prefers-color-scheme media query detects the operating system setting automatically:

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

This ensures a seamless first visit — no flash of white before the dark theme loads.

Step 3: Add a JavaScript Toggle

Give users explicit control with a simple toggle button:

const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});

Using localStorage persists the user’s choice across sessions — a small detail that makes a big difference in UX.

Design Best Practices for Dark Mode

Implementing dark mode is more than inverting colors. Poor execution can actually hurt readability and brand perception. Follow these guidelines:

  • Never use pure black (#000000). Use dark grays like #121212 or #1e1e1e instead. Pure black creates excessive contrast and visual fatigue.
  • Reduce the brightness of images and illustrations by applying a subtle CSS filter: filter: brightness(0.85);
  • Test contrast ratios. Aim for a minimum WCAG AA ratio of 4.5:1 for body text. Tools like WebAIM’s Contrast Checker make this easy.
  • Adjust shadows and elevation. In dark mode, shadows are nearly invisible. Use lighter surface colors to indicate depth instead.
  • Watch your brand colors. Saturated colors that look great on white can feel harsh on dark backgrounds. Desaturate them slightly.

WordPress and PrestaShop: Platform-Specific Tips

On WordPress, you can leverage theme customizer options or plugins. However, for pixel-perfect brand consistency, a custom implementation within your child theme is far more reliable.

On PrestaShop, dark mode typically requires modifications to the active theme’s SCSS files and template overrides. At Lueur Externe, a certified PrestaShop expert agency based in the French Riviera, we regularly integrate dark mode into e-commerce builds — ensuring the shopping experience remains flawless in both themes.

Measuring the Impact

After launch, track the following in Google Analytics or Matomo:

  • Bounce rate (expect a decrease of 5–15% for returning visitors)
  • Average session duration
  • Toggle usage via a custom event

These data points help you understand adoption and refine the experience over time.

Conclusion: Make the Switch

Dark mode is a design standard that directly impacts user comfort, engagement, and energy efficiency. With CSS custom properties, a JavaScript toggle, and careful color design, any website can offer a polished dark theme.

Whether you run a blog, an e-commerce store, or a corporate site, the implementation should be intentional — not an afterthought. If you want a dark mode that truly matches your brand and performs flawlessly, the team at Lueur Externe can help you get it right from the start.

Get in touch with our design experts →