fix: resolve flash of unstyled content in dark mode#766
fix: resolve flash of unstyled content in dark mode#766TusharThakur04 wants to merge 1 commit intonodejs:mainfrom
Conversation
PR SummaryLow Risk Overview Replaces the hardcoded inline theme snippet in Reviewed by Cursor Bugbot for commit 34de276. Bugbot is set up for automated code reviews on this repo. Configure here. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 893ddea. Configure here.
TusharThakur04
force-pushed
the
fix/dark-mode-FOUC
branch
from
893ddea to
4ae89b4
Compare
|
|
||
| <!-- Apply theme before paint to avoid Flash of Unstyled Content --> | ||
| <script>document.documentElement.setAttribute("data-theme", document.documentElement.style.colorScheme = localStorage.getItem("theme") || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"));</script> | ||
| <script>(function(){var p=localStorage.getItem("theme");var t=(!p||p==="system")?(matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"):p;document.documentElement.setAttribute("data-theme",t);document.documentElement.style.colorScheme=t;})();</script> |
There was a problem hiding this comment.
I think we should make this code block more readable for developers who want to contribute or review it. Instead of writing it as a single line, using more descriptive variable names shouldn't significantly impact the file size. @nodejs/web-infra WDYT?
There was a problem hiding this comment.
If that's the case this script source should be in its own file and then inlined via a template string {{}}
TusharThakur04
force-pushed
the
fix/dark-mode-FOUC
branch
from
4ae89b4 to
34de276
Compare
3 participants
Description
This PR resolves the FOUC by resolving
systemtodarkorlightusing matchMedia.Earlier
systemwas directly being applied asset-theme = systemValidation
before :
Screencast.from.2026-04-13.19-26-34.webm
after :
Screencast.from.2026-04-13.19-24-03.webm
Related Issues
n/a
Check List
node --run testand all tests passed.node --run format&node --run lint.