Fix color flash on page load when setting dark/light mode #2110
Conversation
Previously, when loading the landing page, the page colors would flash briefly. For light mode the background flashes black before the white background loads. For dark mode, the header would flash white, and the text black, before the correct colors render. This was happening because the script was being executed after the page had finished loading, likely due to how the page is packaged into chunks. To fix this, the dark mode script is now set inline, so will be part of the generated HTML. This fixes tailwindlabs#2105
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Wow, thanks for looking into it. I switched to a |
|
Thank you! |
|
FWIW, it looks like that issue you are seeing only happens locally? Perhaps it's Next.js taking over the error page? https://tailwindcss-com-git-fork-gazler-fix-dark-mo-afe988-tailwindlabs.vercel.app/404 shows correctly for me. |
|
@Gazler Yeah on prod Here you see the issue: https://tailwindcss-8uo84vawl-tailwindlabs.vercel.app/not-found |
|
I see. In that case, the issue still exists on the 404 page. https://tailwindcss.com/not-found Definitely much less of an issue than it happening on every other page though! |
|
You mean the flash? Yeah I don't know how else we can fix it here since synchronous scripts just don't evaluate. But I think this is reasonable too to have this issue on not-found pages. There aren't accessed too often thankfully 👍 |
Fixes #2112
Previously, when loading the landing page, the page colors would flash briefly. For light mode the background flashes black before the white background loads.
For dark mode, the header would flash white, and the text black, before the correct colors render.
This was happening because the script was being executed after the page had finished loading, likely due to how the page is packaged into chunks.
To fix this, the dark mode script is now set inline, so will be part of the generated HTML.
This fixes #2105
Here's a video showing what was happening before.
tailwindv4.mp4