🎨 Palette: Fix theme switching FOUC and system sync#18
🎨 Palette: Fix theme switching FOUC and system sync#18APPLEPIE6969 wants to merge 1 commit intomainfrom
Conversation
- Add inline script to app/layout.tsx to apply theme class before hydration - Add suppressHydrationWarning to html tag - Update ThemeProvider to respect system preference changes dynamically - Refactor localStorage logic to avoid overwriting system preference on mount Co-authored-by: APPLEPIE6969 <242827480+APPLEPIE6969@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
1 participant
💡 What: Added an anti-FOUC script to
app/layout.tsxand improvedThemeProviderto sync with system preferences.🎯 Why: To prevent the "Flash of Unstyled Content" (light mode flash) when reloading in dark mode, and to ensure the theme switch works reliably between standard light mode and dark mode (#000000).
📸 Before/After: Verified via Playwright script that dark mode persists and applies correctly without hydration mismatch.
♿ Accessibility: Reduces visual flashing which can be jarring for users, and respects system preferences dynamically.
PR created automatically by Jules for task 6979373894842431681 started by @APPLEPIE6969