From 7ef4ea026e3854e8fe6ee535e926e75c66f37166 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sun, 9 Nov 2025 13:34:49 +0100 Subject: [PATCH] fix: eliminate theme flickering on page load MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed FOUC (Flash of Unstyled Content) issue with dark mode: **Problem:** - Page would flash light theme before switching to dark - localStorage check happened after React hydration - Caused jarring visual experience **Solution:** - Added blocking script in that runs immediately - Checks localStorage and system preference synchronously - Applies 'dark' class before any rendering - Prevents flash completely **Technical Changes:** - Inline script in layout.tsx head - Runs before React hydration - Added suppressHydrationWarning to html tag - ThemeToggle now reads from DOM instead of re-setting - Wrapped in try-catch for safety **Result:** - No more flickering on page load - Smooth theme experience - Works with both saved preference and system default - Instant dark mode application 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/layout.tsx | 21 ++++++++++++++++++++- components/layout/ThemeToggle.tsx | 10 +++------- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 2cbc4bf..c05364a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -20,7 +20,26 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + + +