White flash on page refresh with dark theme

[julienduchesne]

Hi, when refreshing a page or loading a new one with the dark theme, I get a white "flash" everytime. Seems like the page goes white while the dark theme is loading.

Is this only happening to me?

Does anyone have a solution for this or is it something that would need to be fixed in the template?

As an example, it happens when I click the user name in the demo website: https://hugo-coder.netlify.app/

[clement-pannetier]

Hi @julienduchesne, as you can see here #350 in my comment, I said : "Just a quick note, you're maybe going to experience FOUC problems when switching themes.".
That's a thing I tried to fix without success and forget about.
If you have a solution, I will be quite interested.

[luizdepra]

I need to confess that I never saw this issue happening. Which browser do you guys use?

[clement-pannetier]

I'm using brave but I think it's not related to the browser. Here is a gif showing the flash I get sometimes:

[pduchnovsky]

can confirm this is happening, tested on chrome/edge chromium, both experience the same, it practically makes mode switch unusable tbh :(
It happens when your system reports preferred mode Dark and you switch and use light theme ... and vice versa, if your system reports light but you switch to and use dark, same issue.

[pduchnovsky]

When I enable 'Bundle JS' feature of Netlify in Site Postprocessing - Asset Optimization, this problem is gone though.

Edit: Found the problem..
This is without netlify optimization:

This is with..:

The problem is max-age=0 for dark mode script by default.. while netlify optimization basically creates a new file and sets max-age to actually acceptable value.
Therefore problem is that by default some hosting providers don't allow caching of the scripts, therefore it downloads it on every refresh, causing delay in applying white/dark mode.

It could be a solution to move this script inline
Edit: Already included fix in my PR #481

[Esgariot]

Does it have anything to do with /posts/ into /post/ url redirection?

https://themes.gohugo.io//theme/hugo-coder/post/ look at url when pressing "Blog"

[luizdepra]

@Esgariot, I think this is the first time I've seen the flash on Firefox. But, this case looks like something different. We can easily fix it removing the redirect.