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-07T07:38:07Z

🚀 Preview for commit 63cb585 at: https://69abd59d900f7bca7380e519--layer5.netlify.app

AnkitRewar11 · 2026-03-07T09:00:51Z

@YASHMAHAKAL @Bhumikagarggg
Sorry for the earlier mistakes. I’m still learning and needed a few attempts to figure it out.

I’ve pushed a fix for the FOUC issue by updating two files: onRenderBody.js (added visibility: hidden with a dark default) and ThemeManager.js (set isDark default to true).

Could you please check the Netlify preview when you get a chance? Thank you. 🙂

AnkitRewar11 · 2026-03-07T09:04:50Z

I’m not seeing the issue on the Netlify preview anymore from my side. Could you please check it once as well? 🙂

saurabhraghuvanshii · 2026-03-07T09:18:25Z

src/theme/app/ThemeManager.js


 const defaultState = {
-  isDark: false,
+  isDark: true,        //  default dark


@AnkitRewar11 this is wrong, we do not want default dark mode.

saurabhraghuvanshii · 2026-03-07T09:19:14Z

@AnkitRewar11 please also remove all lint changes. Keep only logical changes

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

Removed comments regarding theme handling logic. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-07T11:43:35Z

🚀 Preview for commit 317d48d at: https://69ac0f36af6ad123b89386c5--layer5.netlify.app

Removed comments and simplified theme object spread. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-07T12:56:43Z

🚀 Preview for commit 0aca758 at: https://69ac2059911f6b445ccd334e--layer5.netlify.app

saurabhraghuvanshii · 2026-03-08T13:49:10Z

src/theme/app/ThemeManager.js


 export const ThemeManagerProvider = (props) => {
-  const [themeSetting, setThemeSetting] = useState(ThemeSetting.SYSTEM);
+  const [themeSetting, setThemeSetting] = useState(ThemeSetting.DARK);


@AnkitRewar11 keep it system. By default your settings it to dark.

Bhumikagarggg · 2026-03-08T21:02:24Z

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

leecalcote · 2026-03-11T20:39:05Z

Great effort tackling FOUC — the visibility: hidden + inline script approach is the right direction! One thing to watch: if the try block throws (e.g., localStorage blocked in private browsing), visibility never gets reset to visible and the page goes blank. Moving that line outside the try/catch should sort it. Keep at it. 🙌

leecalcote · 2026-03-11T20:39:11Z

Nice work digging into the theme initialization flow! The CSS-first background fallback in fonts.css is a solid addition. One heads-up: the new script doesn't check prefers-color-scheme anymore, so users who had "System" selected will always get dark pre-hydration regardless of their OS setting — worth having another look here.

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

l5io · 2026-03-12T05:53:03Z

🚀 Preview for commit 5b275bf at: https://69b25490c45136bccf8fdbf6--layer5.netlify.app

l5io · 2026-03-12T06:09:03Z

🚀 Preview for commit a56ebe2 at: https://69b2584db34fb1e1f835c158--layer5.netlify.app

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

l5io · 2026-03-12T06:37:35Z

🚀 Preview for commit f3c5dcf at: https://69b25eeaa53125de80717aba--layer5.netlify.app

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

l5io · 2026-03-12T07:02:02Z

🚀 Preview for commit daea70b at: https://69b2649e420b0200773b520d--layer5.netlify.app

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

l5io · 2026-03-12T07:33:03Z

🚀 Preview for commit c839a55 at: https://69b26bf4b34fb12d6735c27a--layer5.netlify.app

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

l5io · 2026-03-12T10:17:06Z

🚀 Preview for commit 03365ec at: https://69b292579886c4ba6da04071--layer5.netlify.app

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

l5io · 2026-03-12T10:51:57Z

🚀 Preview for commit 624c764 at: https://69b29a9633f4feeb4339e3fd--layer5.netlify.app

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>

Set default theme to dark mode

63cb585

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

saurabhraghuvanshii requested changes Mar 7, 2026

View reviewed changes

AnkitRewar11 added 2 commits March 7, 2026 16:49

fix: set dark mode as default to prevent white flash on initial load

b4d50da

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

Clean up comments in onRenderBody.js

317d48d

Removed comments regarding theme handling logic. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Refactor StyledThemeProvider by cleaning up comments

0aca758

Removed comments and simplified theme object spread. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

saurabhraghuvanshii requested changes Mar 8, 2026

View reviewed changes

AnkitRewar11 added 2 commits March 12, 2026 11:06

Update onRenderBody.js

0626e11

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

Update ThemeManager.js

5b275bf

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

Merge branch 'master' into fix/dark-mode-flicker

a56ebe2

Update onRenderBody.js

f3c5dcf

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

Update onRenderBody.js

daea70b

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

Update onRenderBody.js

c839a55

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

Update onRenderBody.js

03365ec

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

Update onRenderBody.js

624c764

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

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 7, 2026

Uh oh!

AnkitRewar11 commented Mar 7, 2026

Uh oh!

AnkitRewar11 commented Mar 7, 2026

Uh oh!

saurabhraghuvanshii Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

saurabhraghuvanshii commented Mar 7, 2026

Uh oh!

l5io commented Mar 7, 2026

Uh oh!

l5io commented Mar 7, 2026

Uh oh!

saurabhraghuvanshii Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Bhumikagarggg commented Mar 8, 2026

Uh oh!

leecalcote commented Mar 11, 2026 • edited by fitzergerald Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

leecalcote commented Mar 11, 2026 • edited by fitzergerald Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

l5io commented Mar 12, 2026

Uh oh!

l5io commented Mar 12, 2026

Uh oh!

l5io commented Mar 12, 2026

Uh oh!

l5io commented Mar 12, 2026

Uh oh!

l5io commented Mar 12, 2026

Uh oh!

l5io commented Mar 12, 2026

Uh oh!

l5io commented Mar 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

YASHMAHAKAL Mar 2, 2026 •

edited

Loading

leecalcote commented Mar 11, 2026 •

edited by fitzergerald

Loading

leecalcote commented Mar 11, 2026 •

edited by fitzergerald

Loading