The hoops you jump through to battle FOUC when <dark-mode-toggle> is a #webcomponent with custom dark/light states... but all this async JS magic may need some time to initialize, so there's also a content attribute for the initial state, but that may in turn be overridden by user choice (and therefore one of the custom states) 🥴
@sir_pepe The first two blocks can be simplified with `:root { color-scheme: light dark; }`, I believe!
As for the flash (a.k.a. FART), if you have the value stored as a cookie or localStorage, you can perhaps use that value as an override to the suggestion above with a script in the `<head>` to the tune of `document.documentElement.style.colorScheme = localStorage.getItem('theme') || 'light dark';` perhaps? (I wrote about something similar: https://chriskirknielsen.com/blog/my-under-engineered-way-to-avoid-a-flash-of-inaccurate-color-theme/)
@chriskirknielsen Oh neat, "color-scheme: light dark" works indeed! Thanks!
I just write the state from storage into the toggle element to centralize the mess at least a little 🙃
@sir_pepe Yeah it's a mess to have these overrides, which is why there are some proposals to build them into the browser on a per-site basis, but for now, the messy solution is the way to go.
Interesting use of `currentScript` BTW!
Peter Kröner
Christopher Kirk-Nielsen