fix: eliminate dark mode Flash of Unstyled Content (FOUC)#8180
fix: eliminate dark mode Flash of Unstyled Content (FOUC)#8180ryzrr wants to merge 2 commits intowebpack:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| } catch (e) {} | ||
| })(); | ||
| </script> | ||
| </head> |
There was a problem hiding this comment.
Can we fix it without such code?
There was a problem hiding this comment.
I think the inline script is the most reliable way to avoid flash 'cause it handles both the system theme and the users saved preference. BUT, another option is using CSS with prefers-color-scheme, which covers the OS setting without any script.
The trade off is that if the user has chosen a different theme than the OS, there might be a brief flash until React loads.
There was a problem hiding this comment.
I think the inline script is the most reliable way to avoid flash 'cause it handles both the system theme and the users saved preference. BUT, another option is using CSS with prefers-color-scheme, which covers the OS setting without any script.
I think it is a good choose
There was a problem hiding this comment.
I implemented the CSS-only route , but it creates a reversed flash for users who override their OS theme preference.
There was a problem hiding this comment.
This , CSS-only approach works for most users, but if someone's OS is set to dark but they've manually picked light mode on the site (or vice versa), they still see a brief flash. So we've just moved the problem. Let me know how you'd like me to proceed.
2 participants
Summary
Fixes the dark mode flash on page load by injecting a very short blocking script into the HTML head.
What kind of change does this PR introduce?
Bug fix
Did you add tests for your changes?
No, but existing tests were run to ensure nothing broke.
Does this PR introduce a breaking change?
No.
If relevant, what needs to be documented once your changes are merged or what have you already documented?
Nothing needs to be documented.
Use of AI?
No