Light/Dark theme flash on page load

[chrede88]

Describe the bug

While updating my site (from v4.9) to v5.0.0-beta1+ (commit 25e0b0627f0965a221ad9b9e7a9c2ff33c01b657) I found that the light/dark theme flashed when loading the site while browser default is dark. initThemeVariation() is called twice on any page load. Once from wowchemy-init.js and once from wowchemy.js. On the first call document.body.classList includes dark, which means that wowchemy-theming.js #L59 thinks I want the light version.

On the second call document.body.classList doesn't include dark, and the theme is set back to dark, by the same function.

I've fixed this issue by changing wowchemy-theming.js #L59 to:

} else if (!isDarkTheme && body.classList.contains('dark')) {

I still don't understand why document.body.classList initially includes dark on my site. I've tried everything, emptying my browser cache, opening in Safari, Firefox and Chrome, rebuilding site without using cached files --ignoreCache. The starter-academic demo doesn't have this issue, although the second call to initThemeVariation() removes dark from document.body.classList, which I believe is also not the correct behaviour.

Technical details:

• Wowchemy Version: v0.0.0-20201230224646-25e0b0627f09
• Hugo Version: v0.79.0 extended
• Browser/OS: Safari 14.0.2, Firefox 83.0, Chrome Version 87.0.4280.67, macOS 11.1

[gcushen]

I believe the set of conditions that can cause a flicker in this case are day_night: true (allow visitor to change theme mode) with a dark theme (light: false) and a user device which prefers dark themes. I'll apply the fix that you mentioned which resolves it.

I still don't understand why document.body.classList initially includes dark on my site.

When the site admin chooses a dark theme as default, the dark class will be preset and only removed if the visitor chooses/prefers a light theme.

[chrede88]

That's exactly my situation. I just assumed the starter-academic demo also used a dark theme, which is why I got confused.