Avoiding Dark Mode flicker

[hughrawlinson]

Hey, wondering if you have thoughts on the initial rendering of the page for users who have a system setting for 'prefers-dark-mode'? It looks like the implementation on the paste docs site currently renders in light mode for SSR and then switches to dark mode in the client once the page hydrates. This leaves a visible light mode flicker during the page load, which I would love to avoid. Is there a way to have both the light and dark modes in SSR and use CSS to choose which to apply, so that we don't need to delay that decision to when the JS runs?

[kate-porter]

Hey @hughrawlinson - I've shared this question with the team to discuss, and we'll get back to you soon!

[kate-porter]

Hey @hughrawlinson - chatted about this with the team, and we know how to fix it, so we've added a ticket to our backlog.

Can you share a little bit more detail about what product/feature this is for and what timeline you're working with, to help us prioritize this fix?

[hughrawlinson]

Thanks @katieporter 😄 I'm working on a new project for twilio.com/docs. Early stages now, but because it's developer facing, I think they might be more likely to notice a light mode flicker. We'd like to publicly trial some pages in Q3. I think it's fair to say that this is a reasonably high priority feature for our use case. Let me know if you need any more info, and I'm happy to chat at any point about the project.

[kate-porter]

Awesome, thanks for sharing that context and timeline. Our engineers are planning to circle back with you in a couple weeks with some solution ideas for this. You'll be hearing from us soon!

[serifluous]

Marking this as answered as a duplicate resolution with #4245