Dark mode reduces eye strain, saves battery on OLED screens, and respects user preferences. But implementing it wrong creates a flash of the wrong theme on load.

The flash problem

Most implementations set the theme with JavaScript after the page renders. Brief flash of the wrong theme.

The solution

Run a tiny inline script in the <head>, before any content renders:

(function() {
  var saved = localStorage.getItem('theme');
  if (saved === 'dark' || saved === 'light') {
    document.documentElement.dataset.theme = saved;
  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.dataset.theme = 'dark';
  }
})();

No flash. The <noscript> tag provides a CSS-only fallback for users with JavaScript disabled.