Flickering from white to dark on load when having dark as default

[AmirKadiric]

First of all, great work with the theme.

I'm experiencing a flickering from white to dark when the page gets loaded if I have dark mode as default.

Not a big deal, but a bit annoying for the eye and first impression of the page.

[Danktuary]

Hey, thank you!

What you described is accurate; it acts this way because the code to determine what themes the page needs to set relies on the this.$site.themeConfig variable, which is only available after VuePress starts running its lifecycle hooks (and eventually finds the ones I provide in the mixins to handle this code).

I'll try to see if there's a quicker/better way to set these settings, but I can't think of one off the top of my head. If anyone else reading this knows of one, feel free to comment!

[System-Glitch]

It happens sometimes when the dark theme is selected and the page is reloaded.

I think you can fix this issue by checking the dark-theme local storage entry in a beforeMount() lifecycle hook in Layout.vue and 404.vue. The check currently takes place when ThemeOptions.vue is mounted.

[Danktuary]

Hey, here's an update: I did move the theme handling code to the Layout/404 components' beforeMount lifecycle hook in v3.0.0, but it still flickers. I just published v3.0.1, which moves that code to VuePress' clientRootMixin plugin option, inside the beforeMount hook, which does get called before the layout files.

Unfortunately, it still flickers, so there's not much I can do about it. 😔 I also thought of using the enhanceAppFiles plugin option, but that isn't really any better. The created hook can't be used because the code relies on browser APIs like document.body, window.localStorage, etc...

I'll close this now since I don't think there's a viable solution to this.

[System-Glitch]

Vuepress uses server-side rendering. The whole DOM is ready before any js script is loaded. It's probably why it flickers no matter where we put the code.

Something worth trying would be to manually add JS to the head tag. (cf this)

[Danktuary]

@System-Glitch That code works for single config files, but since this is a theme with a plugin, I'd still have to use the enhanceAppFiles option. It does expose the siteData data, which has the headTags, themeConfig, and pages properties I'd need to move it to a script tag call, but I can't figure out how to properly populate the headTags. Doing siteData.headTags.push() doesn't work, and trying to assign it doesn't either. Any ideas?