Al cargar una página con Dark Mode, es frustrante que el fondo parpadee antes de que JavaScript aplique el tema oscuro.

El truco

/* ANTES (mal) */
<script>
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark-mode');
  }
</script>

/* DESPUÉS (bien) */
<html class="dark-mode">
  <head>
    <style>
      .dark-mode {
        background-color: #121212;
        color: #ffffff;
      }
      @media (prefers-color-scheme: light) {
        .dark-mode {
          background-color: #ffffff;
          color: #000000;
        }
      }
    </style>
  </head>
</html>

La clave es aplicar el Dark Mode directamente desde el HTML con una clase en el elemento <html>. El CSS por defecto en el <head> asegura que el modo oscuro esté activo antes de que el JavaScript se ejecute. Luego, una consulta de medios CSS ajusta el esquema de color si el usuario prefiere el modo claro, evitando el parpadeo inicial.

Solucionado el problema de parpadeos: el Dark Mode se activa sin esperas y el usuario obtiene una experiencia más fluida desde el primer momento.