ENGINEERING NOTEOctober 14, 20241 min read
Implementing Dark Mode without the Flash of Light Mode (FOUC)
How to read cookies in Next.js layout and inject script tags before the browser paints the body element.
Flashing layouts during page load degrades user experiences. Reading cookies inside Layout components allows servers to pre-configure theme class markers.
We detail using inline scripting blocks to parse configurations and toggle appropriate classes before the DOM elements render.
WRITTEN BY
Shubham Mukherjee
Full Stack & AI Engineer crafting high-performance web applications and intelligent machine learning systems.