fix: resolve dark mode white flash on initial page load by AnkitRewar11 · Pull Request #7446 · layer5io/layer5

AnkitRewar11 · 2026-03-02T16:27:23Z

Description

This PR fixes #7443

Fixes the white background flash (FOUC) that appears
briefly before dark theme loads on initial page visit.

Changes Made

Added setHtmlAttributes to set dark background at HTML level during SSR before any JS runs
Added visibility hidden/visible to prevent white flash while theme variables are being applied
Fixed JSON parsing bug — removed single quote wrapping around JSON.stringify
Fixed theme keys to use ThemeSetting values instead of hardcoded "light"/"dark"
Added fallback background color in fonts.css

Notes for Reviewers

Tested on initial page load — white flash no longer appears before dark theme loads.

Signed commits

Yes, I signed my commits.

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>

YASHMAHAKAL · 2026-03-02T18:30:02Z

@AnkitRewar11 Build is failing :(

YASHMAHAKAL · 2026-03-02T18:31:11Z

onRenderBody.js

-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;" });


@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>

l5io · 2026-03-02T22:11:05Z

🚀 Preview for commit 16be0d1 at: https://69a60abf69446feaf20b1156--layer5.netlify.app

…hite flash Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-03T14:53:34Z

🚀 Preview for commit 4c00b0f at: https://69a6f5b69b91ec0965af033c--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-03T15:21:09Z

🚀 Preview for commit e238605 at: https://69a6fc3180551b17ed94b78c--layer5.netlify.app

Bhumikagarggg

please look it carefully it is still not working

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-03T16:10:46Z

🚀 Preview for commit dc10791 at: https://69a707bdb720f07b5a3f10e3--layer5.netlify.app

AnkitRewar11 · 2026-03-03T16:18:29Z

@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.

YASHMAHAKAL · 2026-03-03T16:30:53Z

🚀 Preview for commit dc10791 at: https://69a707bdb720f07b5a3f10e3--layer5.netlify.app

@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 : )

YASHMAHAKAL · 2026-03-03T16:31:37Z

@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>

l5io · 2026-03-03T17:15:00Z

🚀 Preview for commit cdd8e7d at: https://69a716e51f79b722326cbaca--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-03T17:37:00Z

🚀 Preview for commit 8fd5caa at: https://69a71c097894c73d2fa21956--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Updated background colors for dark mode and light mode. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-07T06:07:37Z

🚀 Preview for commit 9095d71 at: https://69abc061ed37728d8e011b33--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-14T21:19:05Z

🚀 Preview for commit 56c3d1c at: https://69b5d07c69a13fc64517eb0e--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-14T22:05:46Z

🚀 Preview for commit 1b78744 at: https://69b5db8055d43c116569b181--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-14T22:26:29Z

🚀 Preview for commit 165cfdd at: https://69b5e050f87b48807455efea--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-14T22:48:04Z

🚀 Preview for commit 2c527e1 at: https://69b5e55adce2ee59cbd4015b--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-14T23:11:14Z

🚀 Preview for commit 2cbe036 at: https://69b5eac7f0e23e5febdce9ef--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-15T06:19:04Z

🚀 Preview for commit c3b41ee at: https://69b64f254f766dd776edacdd--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-15T06:41:09Z

🚀 Preview for commit f9967fd at: https://69b6544df91a71c1fd51aa2b--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-15T07:09:51Z

🚀 Preview for commit f2e4925 at: https://69b65b0b7a8bf7d714812698--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-15T07:36:31Z

🚀 Preview for commit 3d55b3d at: https://69b6614fc7ca6ee8f24cf3d4--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-15T08:01:54Z

🚀 Preview for commit abbe4ec at: https://69b667289a840fd9813db775--layer5.netlify.app

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-15T08:23:48Z

🚀 Preview for commit ad4ffff at: https://69b66c5e5d704befd6c55714--layer5.netlify.app

Bhumikagarggg · 2026-03-16T04:00:50Z

@AnkitRewar11 Thank you for your contribution! Let's discuss this during the website call today at 5:30 PM IST | 6 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

AnkitRewar11 added 2 commits March 2, 2026 21:53

fix: resolve dark mode white flash on initial page load

0a904a2

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>

fix: add fallback background color to prevent white flash

e4034dd

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 mentioned this pull request Mar 2, 2026

Dark mode flicker — white background appears briefly before theme loads #7443

Open

YASHMAHAKAL suggested changes Mar 2, 2026

View reviewed changes

YASHMAHAKAL requested a review from Bhumikagarggg March 2, 2026 18:32

fix: correct setHtmlAttributes style format

16be0d1

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 requested a review from YASHMAHAKAL March 2, 2026 22:01

fix: use correct dark theme color and inject head styles to prevent w…

4c00b0f

…hite flash Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

fix: set isDark default to true to prevent white flash on SSR

e238605

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

github-actions bot added the area/core-styles label Mar 3, 2026

Bhumikagarggg suggested changes Mar 3, 2026

View reviewed changes

AnkitRewar11 added 2 commits March 3, 2026 21:22

fix: dynamically apply correct SSR background to prevent theme flash

852ec25

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

fix: revert isDark default to false to prevent dark flash

dc10791

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 requested a review from Bhumikagarggg March 3, 2026 16:13

fix: prevent FOUC using head CSS and class injection

cdd8e7d

Refactor theme handling logic and improve background color application. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Refactor theme handling in onRenderBody.js

8fd5caa

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 added 3 commits March 7, 2026 11:18

Fix export statement for wrapPageElement

5f76bbf

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Add setPreBodyComponents to onRenderBody function

9c62040

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Change background color for dark mode and light mode

9095d71

Updated background colors for dark mode and light mode. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update fonts.css

56c3d1c

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update onRenderBody.js

1b78744

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update onRenderBody.js

165cfdd

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update onRenderBody.js

2c527e1

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 added 2 commits March 15, 2026 04:24

Update fonts.css

924ab63

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update onRenderBody.js

2cbe036

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 added 2 commits March 15, 2026 11:30

Update onRenderBody.js

68cebea

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update fonts.css

c3b41ee

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 added 2 commits March 15, 2026 11:54

Update onRenderBody.js

982b5cc

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update fonts.css

f9967fd

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 added 2 commits March 15, 2026 12:23

Update onRenderBody.js

0eac38e

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update fonts.css

f2e4925

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update onRenderBody.js

3d55b3d

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update onRenderBody.js

abbe4ec

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 added 3 commits March 15, 2026 13:34

Update onRenderBody.js

91a4d78

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update StyledThemeProvider.js

7a6af92

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Update ThemeManager.js

ad4ffff

Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 requested a review from saurabhraghuvanshii March 15, 2026 15:42

Conversation

AnkitRewar11 commented Mar 2, 2026

Description

Changes Made

Notes for Reviewers

Signed commits

Uh oh!

YASHMAHAKAL commented Mar 2, 2026

Uh oh!

YASHMAHAKAL Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

l5io commented Mar 2, 2026

Uh oh!

l5io commented Mar 3, 2026

Uh oh!

l5io commented Mar 3, 2026

Uh oh!

Bhumikagarggg left a comment

Choose a reason for hiding this comment

Uh oh!

l5io commented Mar 3, 2026

Uh oh!

AnkitRewar11 commented Mar 3, 2026

Uh oh!

YASHMAHAKAL commented Mar 3, 2026

Uh oh!

YASHMAHAKAL commented Mar 3, 2026

Uh oh!

l5io commented Mar 3, 2026

Uh oh!

l5io commented Mar 3, 2026

Uh oh!

l5io commented Mar 7, 2026

Uh oh!

l5io commented Mar 14, 2026

Uh oh!

l5io commented Mar 14, 2026

Uh oh!

l5io commented Mar 14, 2026

Uh oh!

l5io commented Mar 14, 2026

Uh oh!

l5io commented Mar 14, 2026

Uh oh!

l5io commented Mar 15, 2026

Uh oh!

l5io commented Mar 15, 2026

Uh oh!

l5io commented Mar 15, 2026

Uh oh!

l5io commented Mar 15, 2026

Uh oh!

l5io commented Mar 15, 2026

Uh oh!

l5io commented Mar 15, 2026

Uh oh!

Bhumikagarggg commented Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

YASHMAHAKAL Mar 2, 2026 •

edited

Loading