"Flash of color" when using outside theme that depends on theme-ui

Summary

When using gatsby-theme-docz which depends on theme-ui, I’m noticing a “flash of color” issue when switching to dark mode (light mode is first rendered). This seems to be a known issue that can be resolved by installing gatsby-plugin-theme-ui (maybe?) but I wasn’t sure how this would work if I am relying on an intermediary theme, in this case gatsby-theme-docz.

I’ve posted this issue here and in docz - I hope that’s okay!

---

Bug Report

When initialColorConfig is set to light (default), switching to dark mode using gatsby-theme-docz will cause the “light mode” to initially flicker on any page render. Not sure if this is a docz, gatsby, or theme-ui issue, so I may just post this everywhere. 😅

To Reproduce

Set up a repo with instructions from Gatsby site. You also need to npm i docz@next which isn’t mentioned. Run gatsby develop and toggle the color mode using the icon to view the site in “dark mode.”

Now navigate to a different page, and you should see the light mode flicker before the dark theme is applied. Switching initialColorConfig to dark will cause the dark theme to flicker when switching to light mode.

Sample repo: https://github.com/Yihwan/gatsby-docz-flicker-issue

Though not necessary to reproduce the bug, you may also want to pull in the src folder of gatsby-theme-docz into your src/gatsby-theme-docs dir to debug further. This has already been done in the sample repo.

NB: Since useColorConfig utilizes localStorage, you may have to clear site application data as needed or use incognito.

Debugging so far

Best I can tell, this has to do with the site not picking up on the selected theme-ui-color-mode in localStorage on first render. Instead, for some reason the initialColorConfig selection is rendered first.

This seems to be a known issue with theme-ui because I found at least a passing reference to the issue in the docs. Not sure how this will git in with gatsby-theme-docz though.

Thank you in advance!!!

[hasparus]

Hey folks, just FYI this should be fixed with 0.6.0 — If all of your colors are in the theme object, their CSS properties should be updated on page load. Let me know if you still experience the issue after updating.

[jxnblk]

I’ll have to look into this later, but I think Docz should be using gatsby-plugin-theme-ui to handle this, and as a user of gatsby-theme-docz, you shouldn’t have to install the Theme UI plugin separately. That said, there could definitely be a bug somewhere, which would be causing the flash of colors