fix: resolve dark mode flicker issue by AnkitRewar11 · Pull Request #7533 · layer5io/layer5

AnkitRewar11 · 2026-03-21T13:40:12Z

Description
This PR fixes #7443

This PR resolves the dark mode flicker issue. On page load, the theme
was not being applied before render which caused a visible flicker.
Updated ThemeManager.js, StyledThemeProvider.js, and onRenderBody.js
to properly handle theme initialization and prevent flash of unstyled
content (FOUC).

Notes for Reviewers

Updated ThemeManager.js to handle dark mode state properly
Updated StyledThemeProvider.js for consistent theme application
Updated onRenderBody.js to inject correct theme class before render
No new dependencies added
Only 3 files changed

Signed commits

Yes, I signed my commits.

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>

l5io · 2026-03-21T14:05:03Z

🚀 Preview for commit a5c4a7d at: https://69bea5593286e0c4d4ee82dc--layer5.netlify.app

YASHMAHAKAL

This is much better @AnkitRewar11, Good to merge !!

AnkitRewar11 · 2026-03-21T17:13:42Z

@YASHMAHAKAL Thank you so much for the review and support! 🙏
Really appreciate your guidance throughout this PR.
Looking forward to getting it merged! 😊

l5io · 2026-03-21T20:06:25Z

🚀 Preview for commit 8d09e77 at: https://69befa12ca8054dc493243ab--layer5.netlify.app

Bhumikagarggg · 2026-03-22T16:28:34Z

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

leecalcote · 2026-03-22T21:52:25Z

src/theme/app/StyledThemeProvider.js

@@ -1,22 +1,16 @@
-//uses isDark state to choose styled-component theme (in themeStyles.js)
-//and use ThemeProvider to allow all styled components access to values via props.theme
-


Are these comments inaccurate or unhelpful?

If they are inaccurate because of the changes that you've made, then update what they say.

If they are not helpful, then update what they say.

leecalcote · 2026-03-22T21:53:27Z

src/theme/app/ThemeManager.js

-      // Apply to DOM immediately
      applyThemeToDOM(themeToApply);
-
-      // Persist to localStorage


Reinstate the comments.

leecalcote · 2026-03-22T21:54:40Z

onRenderBody.js

Why was the existing approach completely ripped out and replaced?

What is precisely wrong with the current approach? Fix that.

If the current approach is completely offbase - ok - explain that and why a complete rewrite is needed.

leecalcote · 2026-03-22T21:59:12Z

@AnkitRewar11 without details as to where specifically we're failing in the current implementation, and without details as to how your completely new approach resolves the problem, we're flying blind - - and this doesn't work.

Refactor StyledThemeProvider to ensure consistent theme rendering for SSR. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

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

Refactor theme handling logic in MagicScriptTag component. Update the way themes are injected into the document and change the function signature for onRenderBody. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

Updated comments for clarity and added a fallback for SSR-injected CSS variables during hydration. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-23T07:01:32Z

🚀 Preview for commit 9ad62cb at: https://69c0e4f81e80d04a59c24468--layer5.netlify.app

l5io · 2026-03-23T07:51:22Z

🚀 Preview for commit 9736016 at: https://69c0f0bce6282fe4fa13bfa3--layer5.netlify.app

l5io · 2026-03-23T08:38:45Z

🚀 Preview for commit 42eab57 at: https://69c0fbc40e47164cd82d99e2--layer5.netlify.app

l5io · 2026-03-23T10:04:08Z

🚀 Preview for commit f00fabd at: https://69c10fd10e471689402d9987--layer5.netlify.app

… fixes with comments Signed-off-by: Ankit Rewar <AnkitRewar11@users.noreply.github.com>

l5io · 2026-03-23T10:38:12Z

🚀 Preview for commit f60787a at: https://69c117e633aecf2bd975d0d1--layer5.netlify.app

AnkitRewar11 · 2026-03-23T11:34:16Z

Hello, you make a fair point. I was wrong to get rid of the original approach and do a full rewrite. That made the diff really hard to look at. It hid the actual fix. That was my mistake.

I went back to the version. I put back the architecture, the modern syntax and all the comments.

This pull request is now a simple fix. After looking into the server side rendering lifecycle I found out why the master branch was not working and what I needed to change to fix it:

When the code runs (setPreBodyComponents → setHeadComponents)

The original code put the script in the body of the html. By the time this runs the browser has already started showing the default light styles. I moved it to the head of the html so that it stops the paint until the css variables are calculated and applied.

Turning on styles (data-theme)

The old script put in css variables but it did not set the data-theme attribute on the root of the html. Our global css needs this attribute to work. The variables were there but the background color was not changing before hydration. I added a line of code to fix this.

Working with React (window.__theme)

The server side rendering was calculating the theme. The ThemeManager did not know about it when the client first loaded. It was using the mode by default, which caused a flicker when the page loaded. I made it so that the ThemeManager can pick up the theme that was calculated by the server side rendering.

Fixing the crash that was not showing an error

The master branch was using JSON.parse to parse a string. This is not a way to do it. If any theme string has a quote, in it it breaks and causes a syntax error, which stops the dark mode from working. I changed it so that it passes the string as an object.

The diff should be easier to look at now. The flash of unwanted content is completely gone.

YASHMAHAKAL

@AnkitRewar11 i approved your previous changes and you got suggestions to remove wrong comments you had in changes then why 8 more commits ?
were previous changes wrong ?
@leecalcote didn't said your approach was wrong, they want you to explain your approach and the changes you made. you're reacting to every review by 4-5 new commits moving into a circle, try to explain why your approach works, try to defend your changes, try to prove it, and you can defend or back yourself only if you're confident about your approach.

YASHMAHAKAL · 2026-03-23T16:34:04Z

@AnkitRewar11 even this time you've responded to review with 5-6 new commits. and the description you post after your commits, it was even relevant to your first commit, and about diff's looking easy, they were much easy before : )

correct me if i'm wrong, Thanks for your efforts 👍

AnkitRewar11 · 2026-03-23T16:54:18Z

@AnkitRewar11 even this time you've responded to review with 5-6 new commits. and the description you post after your commits, it was even relevant to your first commit, and about diff's looking easy, they were much easy before : )

correct me if i'm wrong, Thanks for your efforts 👍

You were right my previous approach was also correct. But yesterday Lee suggested a few changes, like adding the comments again, and I’ve done that now.

As for the current approach, there isn’t much difference between the two. I just made minimal changes to the old code so that it’s easier to understand.

And regarding the new commits, I accidentally made the changes directly here instead of locally, so that’s why so many commits were created. Sorry about that.

rishiraj38 · 2026-03-28T15:40:54Z

src/theme/app/ThemeManager.js

+    const initialColorValue = (root.style.getPropertyValue("--initial-color-mode") || "").trim();
+    const actualTheme = window.__theme || initialColorValue || ThemeSetting.LIGHT;

-    // Get stored theme from localStorage


Please don’t remove the comments.

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

fix: resolve dark mode flicker issue

a5c4a7d

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch from 68be4fd to a5c4a7d Compare March 21, 2026 13:49

AnkitRewar11 mentioned this pull request Mar 21, 2026

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

Open

CodexRaunak requested a review from YASHMAHAKAL March 21, 2026 14:13

YASHMAHAKAL approved these changes Mar 21, 2026

View reviewed changes

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

8d09e77

Bhumikagarggg requested a review from saurabhraghuvanshii March 22, 2026 17:11

leecalcote requested changes Mar 22, 2026

View reviewed changes

leecalcote reviewed Mar 22, 2026

View reviewed changes

leecalcote requested changes Mar 22, 2026

View reviewed changes

AnkitRewar11 added 5 commits March 23, 2026 11:55

Update StyledThemeProvider for SSR theme consistency

c78a6f9

Refactor StyledThemeProvider to ensure consistent theme rendering for SSR. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

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

7642946

Refactor ThemeManager for improved theme handling

21df90e

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

Refactor StyledThemeProvider with improved comments

9ad62cb

Updated comments for clarity and added a fallback for SSR-injected CSS variables during hydration. Signed-off-by: Ankit Rewar <171806101+AnkitRewar11@users.noreply.github.com>

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch 2 times, most recently from 2048e58 to 42eab57 Compare March 23, 2026 08:22

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch from 42eab57 to f00fabd Compare March 23, 2026 09:48

chore: restore original onRenderBody structure and apply precise FOUC…

f60787a

… fixes with comments Signed-off-by: Ankit Rewar <AnkitRewar11@users.noreply.github.com>

AnkitRewar11 force-pushed the fix/dark-mode-flicker-clean branch from f00fabd to f60787a Compare March 23, 2026 10:22

AnkitRewar11 requested a review from YASHMAHAKAL March 23, 2026 11:41

YASHMAHAKAL reviewed Mar 23, 2026

View reviewed changes

AnkitRewar11 requested a review from leecalcote March 24, 2026 05:37

rishiraj38 reviewed Mar 28, 2026

View reviewed changes

		@@ -1,22 +1,16 @@
		//uses isDark state to choose styled-component theme (in themeStyles.js)
		//and use ThemeProvider to allow all styled components access to values via props.theme

Conversation

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

Uh oh!

Uh oh!

l5io commented Mar 21, 2026

Uh oh!

YASHMAHAKAL left a comment

Choose a reason for hiding this comment

Uh oh!

AnkitRewar11 commented Mar 21, 2026

Uh oh!

l5io commented Mar 21, 2026

Uh oh!

Bhumikagarggg commented Mar 22, 2026

Uh oh!

leecalcote Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

leecalcote Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

leecalcote Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

leecalcote commented Mar 22, 2026

Uh oh!

l5io commented Mar 23, 2026

Uh oh!

l5io commented Mar 23, 2026

Uh oh!

l5io commented Mar 23, 2026

Uh oh!

l5io commented Mar 23, 2026

Uh oh!

l5io commented Mar 23, 2026

Uh oh!

AnkitRewar11 commented Mar 23, 2026

Uh oh!

YASHMAHAKAL left a comment • 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!

YASHMAHAKAL commented Mar 23, 2026

Uh oh!

AnkitRewar11 commented Mar 23, 2026

Uh oh!

rishiraj38 Mar 28, 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

AnkitRewar11 commented Mar 21, 2026 •

edited

Loading

YASHMAHAKAL left a comment •

edited

Loading

rishiraj38 Mar 28, 2026 •

edited

Loading