Postat acum 1 zi
tsx
// app/layout.tsx — script inline înainte de body
<script dangerouslySetInnerHTML={{ __html: `
(function() {
const t = localStorage.getItem("theme");
const d = t === "dark" || (!t && matchMedia("(prefers-color-scheme:dark)").matches);
document.documentElement.classList.toggle("dark", d);
})();
` }} />De ce FOUC?
Dacă setezi clasa dark abia în useEffect, ai deja paint-ul primul făcut în light mode → flash alb neplăcut.
Soluția
Rulezi un mic script sincron înainte de <body> care pune dark pe <html> înainte de primul paint.
Toggle-ul
function toggle() {
const next = document.documentElement.classList.toggle("dark") ? "dark" : "light";
localStorage.setItem("theme", next);
}
Tailwind 4
Nu mai e nevoie de darkMode: "class" în config — Tailwind 4 detectează .dark automat. Folosești dark:bg-zinc-900 direct.