A brief flash of light theme when changing pages in dark mode

[vinhphm]

Hi, firstly, thank you so much for your work on this incredible theme. Here is something I know notice during using the theme.

Describe the bug When the page is in dark mode, changing to another page of the website could cause a brief flash of light theme before it set back to dark. It's like the flash light of a camera.

To Reproduce Steps to reproduce the behavior:

1. Without the theme settings in config.toml, go to the website.
2. Set the theme to dark if it's not in dark mode already.
3. Click to access other pages like "Posts", "Portfolio", "About",...
4. See error

Expected behavior The transition should be smooth and not flash a light theme appearance.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome, Safari
• Version of the Theme: v1.8.0
• Version of Hugo (run a hugo version if unsure): v0.94.2

Additional context

[lxndrblz]

@vinhphm Thanks for your report. Would you mind recording a short video that displays the issues?

[vinhphm]

@lxndrblz Sure. I don’t have a computer right now but here is how it happens on mobile:

https://user-images.githubusercontent.com/75784849/159194536-c8b86d83-8eef-4e6b-8ad1-0a405bfeb683.MOV

[lxndrblz]

@vinhphm Thanks for the video. I will need to investigate if there is a way this brief flicker good be resolved.

[Sohn123]

I had the same issue and I resolved it with the following post. Instead of applying the theme class to the body of the document, apply it to the HTML tag directly. This way the theme can be set before the initial render and there is no white flash. If I have time, I'll refactor my code and open a PR the next days.