¿Cómo se puede evitar que la página parpadee cuando se usa el modo oscuro basado en clases en Tailwind CSS con Next.js v12 sin usar paquetes de terceros como los siguientes temas?

he mirado:

• estas preguntas y respuestas ¿Cómo corregir el parpadeo del color de fondo del modo oscuro en NextJS? y si bien es una solución válida/funcional en Next.js <v12, en v12 ya no funciona y arroja advertencias en desarrollo que sorprendentemente se convierten en un error de bloqueo de compilación en prod env Do not add <script> tags using next/head (see inline <script>). Use next/script instead. See more info here: https://nextjs.org/docs/messages/no-script-tags-in-head-component
• Sin embargo, este artículo https://www.vidyasource.com/blog/dark-mode-nextjs-tailwindcss-react-hooks incluye el script <Script strategy="beforeInteractive" src="/scripts/darkMode.js"/> en un destello de página, ya que agrega defer en la head
• Este documento oficial del modo oscuro de Tailwind CSS sobre lo que se requiere https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

 // On page load or when changing themes, best to add inline in `head` to avoid FOUC if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') }

Creo que restringen poner cosas en Head desde v12 para prepararse para Suspense/Streaming/React v18.

De cualquier manera, no sé cómo hacerlo sin los siguientes temas, ¿alguien sabe cómo podemos inyectar ese fragmento de secuencia de comandos para evitar que la página parpadee?

Espero que esta pregunta tenga sentido, si no, por favor dame un grito.

Me gustan las cosas simples y minimalistas, de ahí el objetivo de reducir la dependencia de paquetes de terceros, algo tan simple debería ser posible sin una solución demasiado complicada, en mi opinión.