Theme flickers opposite color during loading if the user's OS theme is different from the one they're using on the website.
Reproducing:
Set the user's OS theme color to dark.
Open the website, which loads the dark theme automatically as main.js detects it.
Click on the theme switch icon, turning the website to the light theme. The page automatically loads the new theme as expected.
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.
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:
main.js
detects it.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.