figlet-ui/components/layout/ThemeToggle.tsx at main

Files

Sebastian Krüger 7ef4ea026e fix: eliminate theme flickering on page load

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 <head> 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 <noreply@anthropic.com>

2025-11-09 13:34:49 +01:00

1.4 KiB

Raw Permalink Blame History

View Raw

1.4 KiB Raw Permalink Blame History

1.4 KiB

Raw Permalink Blame History