Domina el modo oscuro en CSS sin parpadeos molestos

Muchos desarrolladores experimentan parpadeos molestos al implementar el modo oscuro, ya que el CSS a veces se carga antes que el JavaScript encargándose de ajustar el tema.

El truco

Antes (mal):

body {
  background-color: white;
  color: black;
}

JavaScript:

if (userPrefersDarkMode) {
  document.body.style.backgroundColor = 'black';
  document.body.style.color = 'white';
}

Después (bien):

/* Asume el modo oscuro por defecto si el usuario lo prefiere */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

body {
  background-color: white;
  color: black;
  transition: background-color 0.3s, color 0.3s;
}

Usa el media query prefers-color-scheme para aplicar estilos antes de que cargue el JavaScript. Esto reduce el riesgo de parpadeo porque CSS se carga antes que el JS. Así, si el navegador indica que el usuario prefiere el modo oscuro, los estilos se aplican directamente sin esperar a scripts externos. Añadir transiciones suaves mejora la experiencia de usuario al cambiar temas.

Con este enfoque, mejoras la carga inicial de tu página, ofreciendo una experiencia visual más adecuada sin depender del tiempo de carga del JavaScript.