I like my dark theme implementation which supports the same operations, but a tad lighter, more flexible and not-Reacty: a toggle, falling back to the prefers-color-scheme value if it hasn’t been toggled <i>or if JavaScript is disabled</i> (and I don’t think Josh’s does that), and avoiding a flash of unstyled content. I wrote about it at <a href="https://chrismorgan.info/blog/dark-theme-implementation/" rel="nofollow">https://chrismorgan.info/blog/dark-theme-implementation/</a>.<p>The problem as a whole is definitely a tad fiddly, but I still think that trying to do things in React is a substantial part of what’s making it complicated here. I instead used regular stylesheets and the media attribute to control the toggling, and I think that’s the best solution, because it’s what makes it work perfectly with and without JavaScript. (I used external stylesheets, but you could inline them if you wanted; the media attribute works on <style> as well as <link>.)<p>Josh, I’d be interested in your opinion on it. It took me several iterations to end up where I did (definitely didn’t occur to me to alter the media attribute at first!), and I think it’d apply cleanly to such sites as yours, and be better for the toggling.