Website flashes with light theme for a second even when dark theme is selected about theme-ui HOT 8 CLOSED

Firefox Quantum latest v67.0.4 (64-bit). Sucks tho.

from theme-ui.

This is a limitation with how storing the values in localStorage (which happens client-side) and building static HTML at build time work. The side uses the Gatsby Plugin to attempt to minimize the flash of styles, but it would be nice to have a better solution. If you're noticing it on the live theme-ui.com, it'd be helpful to know what browser you're using for debugging

from theme-ui.

I notice the flash in theme-ui.com but for every other component other than body. I'm using Chrome 75.0.3770.100.

This is to be expected though, if I understand the code correctly:

• theme-ui/src/color-modes.js
• gatsby-theme-ui/src/provider.js
• gatsby-theme-ui/gatsby-ssr.js

from theme-ui.

@MarkosKon thanks! And yes, currently, the flash prevention code only handles body text and background colors

from theme-ui.

By the way, as a workaround you can use CSS variables. I created an example.

Points of interest:

• gatsby-ssr.js
• colors
• global styles
• layout.js

Does it make sense to alter the theme-ui code to generate the CSS variables automatically from the theme object?

from theme-ui.

I started an implementation that would work similarly, but also note that custom properties aren’t supported in IE 11 – ideally all colors could handled but this started with only text and background colors to flesh out the basic implementation

from theme-ui.

Since Theme UI uses CSS custom properties now, this is less of an issue, so closing this issue out

from theme-ui.

@jxnblk now it's great. 1 gotcha tho - the theme name is inconsistent now for a second when u refresh after selecting different them than light.

from theme-ui.