Storing the user preference in local storage opens up a whole can of worms. What if the user has multiple tabs/windows open? Now you should probably be using th

Storing the user preference in local storage opens up a whole can of worms. What if the user has multiple tabs/windows open? Now you should probably be using the 'storage' event to synchronize the state (which is not done in this article). Otherwise, prepare to be blasted with a sea of white when switching tabs. What if the user toggles their preference on a system level? Should this then override the locally stored value? Should it be cleared? Or is the stored preference persisted over the system preference at all times, leaving the user unable to reset the value to restore the behavior of following system preferences first. Additionally, you will now have to add JavaScript in a critical page load path to add classes to avoid a flash of the wrong color. As well as critical CSS to ensure the most basic colors are applied early on while the rest of your stylesheet loads in. My take on this is, don't even try to add a dark mode toggle to the site itself, always rely on CSS and never JS. This is the responsibility of the browser, you can even customize the appearance in your browser settings separately of the operating system. It will load user agent styles with dark mode if the 'color-scheme' meta is set correctly, so you don't have to even do the critical styles to avoid flashes. I would really like to see Firefox, Chrome, etc. add a dark mode toggle in the navigation bar that could simply be used to toggle the 'prefers-color-scheme' value on sites that have the 'color-scheme' meta set up correctly, so we don't have to constantly implement this feature over and over again on every site (usually done wrong).