Closed chrede88 closed 3 years ago
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.
That's exactly my situation. I just assumed the starter-academic demo also used a dark theme, which is why I got confused.
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 calldocument.body.classList
includesdark
, which means that wowchemy-theming.js #L59 thinks I want the light version.On the second call
document.body.classList
doesn't includedark
, and the theme is set back todark
, by the same function.I've fixed this issue by changing wowchemy-theming.js #L59 to:
I still don't understand why
document.body.classList
initially includesdark
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 toinitThemeVariation()
removesdark
fromdocument.body.classList
, which I believe is also not the correct behaviour.Technical details: