fix: resolve dark mode white flash on initial page load#7446
fix: resolve dark mode white flash on initial page load#7446AnkitRewar11 wants to merge 9 commits intolayer5io:masterfrom
Conversation
Refactor theme handling to use ThemeSetting values as keys and improve theme application logic. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
|
@AnkitRewar11 Build is failing :( |
onRenderBody.js
Outdated
| export const onRenderBody = ( { setPreBodyComponents }) => { | ||
| export const onRenderBody = ({ setPreBodyComponents, setHtmlAttributes }) => { | ||
| // FIX 4: Set dark background at HTML level during SSR — before any JS runs | ||
| setHtmlAttributes({ style: "background-color: #000;" }); |
There was a problem hiding this comment.
@AnkitRewar11 Change to setHtmlAttributes({ style: { backgroundColor: "#000" } });
This can be root cause of build failure : )
Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
|
🚀 Preview for commit 16be0d1 at: https://69a60abf69446feaf20b1156--layer5.netlify.app |
…hite flash Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
|
🚀 Preview for commit 4c00b0f at: https://69a6f5b69b91ec0965af033c--layer5.netlify.app |
Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
|
🚀 Preview for commit e238605 at: https://69a6fc3180551b17ed94b78c--layer5.netlify.app |
Bhumikagarggg
left a comment
Bhumikagarggg
left a comment
There was a problem hiding this comment.
please look it carefully it is still not working
Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
|
🚀 Preview for commit dc10791 at: https://69a707bdb720f07b5a3f10e3--layer5.netlify.app |
|
@Bhumikagarggg Fixed FOUC properly by updating the onRenderBody.js script to set the background dynamically before hydration. Reverted isDark to false to avoid dark flashes for light mode users. Please review. |
@AnkitRewar11, are you aware that this specific link called netlify preview actually shows a site-preview for your changes ? after every commit you'll see this preview which carries chnages you made in your recent commits. so before requesting any review make sure everything is working in those specific netlify previews.. Thanks : ) |
|
@AnkitRewar11 and yes, i can still see white flash in latest preview :( |
Refactor theme handling logic and improve background color application. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
|
🚀 Preview for commit cdd8e7d at: https://69a716e51f79b722326cbaca--layer5.netlify.app |
Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>
|
🚀 Preview for commit 8fd5caa at: https://69a71c097894c73d2fa21956--layer5.netlify.app |
4 participants
Description
This PR fixes #7443
Fixes the white background flash (FOUC) that appears
briefly before dark theme loads on initial page visit.
Changes Made
setHtmlAttributesto set dark background at HTML level during SSR before any JS runsNotes for Reviewers
Tested on initial page load — white flash no longer appears before dark theme loads.
Signed commits