Avoiding dark mode flicker with CSS variables #4245
-
|
This might be a mild necro of this discussion, but it's a few years old, and I'm unsure if Kate is still on the Paste team. With the recent Marketing team announcements, we're experimenting with adding dark mode to Twilio Docs. Love that this is as simple as toggling However, as noted in the prior discussion, handling this in JavaScript (via Emotion?) causes a white flicker on initial load for dark mode users due to SSG. Paste avoids this by delaying rendering until mount, but that results in empty HTML at first, which isn't ideal for SEO. Other UI libraries prevent flickering by using CSS variables for theming, avoiding JS entirely. A small script in the site's Would migrating Paste’s theming to CSS variables be feasible? Not sure if it's on the roadmap, but I’d love to propose it! 🙏 Note Inconveniently, I'm OOO until March 10th, so another docs platform engineer may respond before I do to any updates here 😅 |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
|
Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary. Sorry, I don't know how to help with that. I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:
|
Beta Was this translation helpful? Give feedback.
-
|
Hi @stern-shawn, you are correct that we are using Emotion as our underlying theme provider. I will be raising this discussion internally, our engineer who made our site fix will have more insight. As a side note I love that you are already experimenting with the new marketing announcement. Internally we are starting to create a test theme to see how we can easily apply the new styling. It would work the same way as setting the theme token from light to dark as you saw. I imagine we would also run into the same issues. For the docs site could you share what frameworks you are using, NextJS? |
Beta Was this translation helpful? Give feedback.
-
|
Just following up. We reverted our docs way of handling this as it was impacting our SEO. I have been investigating how we would use CSS variables and cookies with our current design system. I do have this working now using only static pages in our Next routes. I will be adding support for CSS variables along with guidance on how to use this for SSG and SSR to remove the flicker completely. It may take a few weeks but I'm happy to link to any logic and discuss any of this with you before we publish. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @krisantrobus ! Just back from PTO and catching up. Glad that helped out your docs SEO! We're using NextJS with SSG primarily (with a smattering of ISR), so anything you build to get it working for the Paste docs should be workable on our end 😄 , no rush as I don't think this work got prioritized on our end while I was out. |
Beta Was this translation helpful? Give feedback.
-
|
Welcome back @stern-shawn. That sounds perfect! We will deploy the fix for our site this week and I will be writing the documentation in the next sprint. We will not be doing another package release until 2025.04.15 so you will not be able to test out using CSS variables in our Theme provider until then. If you do need this sooner let us know and we could publish sooner. Also on an unrelated note, what version of React do you currently use? We will soon be doing a major release to upgrade to React 19 and deprecate support of 16. |
Beta Was this translation helpful? Give feedback.
-
|
That's awesome news, thank you! I don't think there's a rush, as the tickets I made to implement dark mode got moved to "on hold" in Jira, so that timeline works great. We're on 18.3.x right now and will probably go to 19 at some point, happy to wait on Paste. When I did an experimental migration from Next.js pages router -> app router and React 18 -> 19, we got lots of peer dependency conflicts from Paste (no actual runtime issues, though 🔥 ), so it's cool to hear that'll be getting bumped! (And we're not on React 16 so no issues there) |
Beta Was this translation helpful? Give feedback.
-
|
Hi @stern-shawn we have our fix published in our packages and I wrote a blog post for this with references to how we implemented it. Our fix is currently live and functional. I'm going to mark this as answered but if you have any issues implementing it your side, find any confusion in the documents you would like addressed or any other concerns please reach out. We're always happy to help. |
Beta Was this translation helpful? Give feedback.
-
|
Awesome, thanks so much for the feature support and the blog writeup, I saw the PR and it makes sense! We have a decent ways to go before we can truly use this since we need to figure out a good way to handle all of our bright/transparent images in the docs as well as some other design issues that popped up in my PoC, but I'll be sure to reach out if we hit any snags ❤️ You can see some of the issues in the epic I'd written up; advice is appreciated but by no means demanded 😄 |
Beta Was this translation helpful? Give feedback.
Hi @stern-shawn we have our fix published in our packages and I wrote a blog post for this with references to how we implemented it. Our fix is currently live and functional.
I'm going to mark this as answered but if you have any issues implementing it your side, find any confusion in the documents you would like addressed or any other concerns please reach out. We're always happy to help.