search

rhazdon / hugo-theme-hello-friend-ng

Pretty basic theme for Hugo that covers all of the essentials. All you have to do is start typing!
https://github.com/rhazdon/hugo-theme-hello-friend-ng/
Other
1.45k stars 765 forks source link

Dark/light script flickering theme if OS theme is the opposite #429

Open ttybitnik opened 1 year ago

ttybitnik commented 1 year ago

Description:

Theme flickers opposite color during loading if the user's OS theme is different from the one they're using on the website.

Reproducing:

  1. Set the user's OS theme color to dark.
  2. Open the website, which loads the dark theme automatically as main.js detects it.
  3. Click on the theme switch icon, turning the website to the light theme. The page automatically loads the new theme as expected.
  4. From now on, with the OS set to dark and the website set to light, every loading while navigating the website flickers the OS color (dark) and then loads the light theme immediately after.

Note: The opposite also occurs when the OS is set to light and the website is set to dark, resulting in white loading flickering.

This unexpected behavior seems to occur more heavily on Firefox. I have tried some troubleshooting steps, but I haven't been successful since I'm still learning stuff. I'm not sure if the proper solution should be implemented in main.js itself.

Any assistance, solution, or insight regarding this issue would be greatly appreciated.

PS: If needed, to reproduce this, one can visit my blog, since it has the enableThemeToggle option set to true allowing the user to see/click the theme icon.