WebPerf CSS JS PageSpeed Dark Mode Done Right: Performance & Accessibility Considerations

Dark mode has become a standard feature in modern web design, offering a sleek aesthetic and potential benefits like reduced eye strain and energy savings. However, implementing dark mode goes beyond just inverting colors—it requires careful consideration of performance and accessibility to ensure an optimal user experience.

I want to understand how you guys are going about it.

---

Here are a few perf considerations I am following:
Efficient Theme Switching
Avoid unnecessary re-renders or expensive computations when switching between light and dark themes.
Best Practices:

• Use CSS variables instead of toggling entire stylesheets.
• Leverage prefers-color-scheme to detect system settings and apply the preferred theme without JavaScript.
• Minimize DOM manipulation—apply class toggling at the highest parent container to reduce reflows and repaints.

Code:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #ffffff;
}

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

Reduce Flash of Unstyled Content (FOUC)
If dark mode relies on JavaScript, users may experience a white flash before the theme applies.

Best Practices:

• Apply styles using CSS media queries instead of waiting for JavaScript execution.
• Store user preferences in localStorage and apply them before page load.
• Use a server-rendered default (e.g., SSR frameworks like Next.js can serve the preferred theme on the first request).

Code:

const userPref = localStorage.getItem("theme");
if (userPref) {
  document.documentElement.setAttribute("data-theme", userPref);
}

Optimizing Image and Video Assets
Dark mode can impact how images and videos appear, sometimes causing contrast issues.
Best Practices:

• Use picture elements with different images for dark and light modes.
• Convert transparent PNGs to WebP for better adaptability across themes.
• Adjust brightness and contrast dynamically for embedded media.

Code:

<picture>
  <source srcset="dark-mode-image.jpg" media="(prefers-color-scheme: dark)">
  <img src="light-mode-image.jpg" alt="Adaptive image">
</picture>

Implementing dark mode isn’t just about inverting colors—it’s about optimizing for performance and accessibility to create a seamless experience for all users.

I'd like to know your thoughts and how you guys are going about it.