Site Dark Mode bug

[Marcloure]

Steps to reproduce:

• Turn on Dark Mode
• Go to a page (e.g.: Change Log)
• Hit "Control + Shift + R"

The page will swap to light mode for a moment before loading the black background, but the headers' colors won't change.

[mlenser]

The site is staticly generated to be light mode. Meaning the HTML is precompiled. On load the page renders all the html and styling and then injects javascript. That javascript then looks at your local storage for a value and adjusts the site based on that value.
So as a standard way of building the site, that isn't fixable.

However there is a fairly hacky workaround that could work: https://joshwcomeau.com/gatsby/dark-mode and https://github.com/joshwcomeau/dark-mode-minimal

Though it feels like a few hours of work that I don't want to particularly fix at this time for an edge case that only occurs on a full hard refresh.

[Marcloure]

It also happens when you update a page.

What I find strange is that the background changes but not the font color. But anyway, I also agree this is low priority.

[mlenser]

It also happens when you update a page.

When I update a page, or when you refresh? Updating a page would be expected as then the cache is cleared. On refresh doesn't seem to happen for m, likely due to some of the offline work I put in.

[Marcloure]

When I update a page, or when you refresh?

When you update. I know it's expected, I was just clarifying.

[mlenser]

I believe this is solved

[mlenser]

Not fixed

it appears to be ok on mobile where you can't hard refresh, but desktop hard refresh is still broken. It's much less of an issue now (only that first load), but still an issue

[mlenser]

https://victordibia.com/blog/gatsby-fouc/#avoiding-flash-of-unstyled-content-fouc-with-gatsby-ssrjs