I have a preloader that has a light and dark mode class. I also save a user’s preference for light/dark mode as localStorage. I wrote a simple script that checks the user’s localStorage and adds or removes the dark-mode class to my preloader. The problem I am facing is if I put the script in the header tags the preloader hasn’t loaded yet so the script cannot find the loader element. And if I wait until DOM is loaded I get the flash of white before the loader turns dark. Embedding the script as an HTML embed right into the preloader div element is also causing bugs.
I am thinking to try the CSS Media Query “prefers-color-scheme” but am not sure if I can then still use localStorage to save the users preference on future site visits.
If anyone has any recommendations I’d appreciate it!