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

[Yihwan]

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!!!

[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

[Yihwan]

hey @jxnblk! any chance you had the time to look at this yet?

no rush, if there's anything that comes to mind i can help debug further. i noticed that gatsby-theme-docz does not seem to have a gatsby-plugin-theme-ui dependency if that helps: https://github.com/doczjs/docz/blob/master/core/gatsby-theme-docz/package.json

[jxnblk]

If it doesn't include gatsby-plugin-theme-ui, then I'm not sure how it's intended to work. I'd recommend checking with Docz - quickly searching the repo, I don't see the code for preventing the flash of colors in their repo, so it might not be implemented there yet

[Yihwan]

hey @jxnblk, i had a chance to sync with the core contributors of docz, and we may be stuck on how best to implement gatsby-plugin-theme-ui within gatsby-theme-docz.

it seems like we might have to modify this file, but i'm not exactly sure how. could we somehow recreate what gatsby-plugin-theme-ui is doing here (and make our own gatsby-ssr.js file)?

anyways i really appreciate you taking a look at this, especially since it's from an outside repo. we just haven't been able to make much progress on our own.

[jxnblk]

The setup for use within a Gatsby theme should be the same as setting up Theme UI in a regular Gatsby site -- nothing special should be required for Docz

[manfromanotherland]

Having the same issue and also using Docz, did anyone found a workaround for this? Thank you.

[suhrudh]

has anyone found a work around or at least a way to remove the dark mode toggle option?

[lachlanjc]

has anyone found a work around or at least a way to remove the dark mode toggle option?

If you mean removing dark mode entirely, don't define any modes on your Theme UI colors, then remove whatever switch component you have, &/or disable the useColorSchemeMediaQuery option on your theme. You can read more about color modes here: https://theme-ui.com/color-modes Let me know if you need anything else!

[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.

[lachlanjc]

Looks like gatsby-theme-docz is requiring Theme UI 0.2.38, which is super outdated at this point. I'm closing this issue since we've fixed this issue on our end, but Docz should update so they're getting the latest work!