From 1e1489ec586c62cbe4d4497d966b88942b2c3374 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sat, 8 Nov 2025 17:18:28 +0100 Subject: [PATCH] fix: prevent theme flicker on page load MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add blocking script in HTML head to apply theme before React hydration. This eliminates the flash of wrong theme (FOUT) that occurred when the page loaded with default theme before useEffect could apply the saved theme. The script: - Runs synchronously before page render - Reads theme from localStorage - Applies dark/light class to element immediately - Handles system theme preference detection - Wrapped in try-catch for safety This ensures users see the correct theme from the first paint, with no flicker. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/layout.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/app/layout.tsx b/app/layout.tsx index 893dfaf..2ad43b4 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -14,6 +14,30 @@ export default function RootLayout({ }>) { return ( + +