Building a Dark Mode System in Next.js App Router — Without Layout Flash A developer building a dark mode system for a free AI image generation tool solved the flash of unstyled content (FOUC) in Next.js App Router by using a synchronous inline script in the to apply the theme before React hydrates. The script reads the user's preference from localStorage or system settings and adds a 'dark' class to the document element, preventing the flash. The approach includes suppressHydrationWarning and try/catch to handle React mismatches and browser errors. Dark mode sounds simple until you implement it. Then you discover the flash. On first load, before JavaScript runs, your page renders with the default theme. Then the theme switcher kicks in. For a fraction of a second — sometimes longer on slow connections — users see the wrong theme before it corrects itself. This is the flash of unstyled content FOUC applied to theming, and it's one of the more annoying UX problems to solve correctly in Next.js App Router. Here's the approach that works, which I used building the theming system for a free AI image generation tool https://pixova.io/blog/free-ai-art-generator . Next.js App Router renders on the server by default. The server doesn't know the user's theme preference — that's stored in localStorage or a cookie on the client. So the server renders with the default theme, sends that HTML to the browser, and then JavaScript runs and corrects the theme. The gap between HTML arriving and JavaScript running = the flash. The key insight: to prevent the flash, you need to apply the theme before React hydrates. This means a synchronous inline script in the