El parpadeo al activar el modo oscuro suele ocurrir cuando el CSS tarda en aplicarse, lo que genera una experiencia de usuario poco fluida.

El truco

Antes (mal):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta name="color-scheme" content="dark light">
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-black dark:text-white">Hola Mundo</h1>
</body>
</html>

Después (bien):

<!DOCTYPE html>
<html lang="es" class="dark">
<head>
  <meta name="color-scheme" content="dark light">
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-black dark:text-white">Hola Mundo</h1>
  <script>
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.classList.add('dark');
    }
  </script>
</body>
</html>

El truco está en utilizar JavaScript para añadir la clase dark al elemento HTML antes de que se cargue el contenido visual. De este modo, evitas que el navegador primero muestre el modo claro y luego aplique el CSS oscuro, evitando así el parpadeo.

Asegúrate de incluir el script antes del cierre del body para que se ejecute tan pronto como sea posible, minimizando el retraso en la aplicación del estilo oscuro.