Refactor ThemeProvider and prefers-color-scheme detection

[58bits]

[Update - for the TL;DR - jump to this comment ]

@mattstobbs @kiliman - so I took a stab at refactoring Matt's excellent theme provider so that it can be placed inside the body of the React component tree.

I'm sure there's hours of ROFL if you look too closely at my commit history and how I ended up with what's here now. Honestly Matt - what a journey you went on. It took a while to unpack things and put them back together again, but I think it just about works. I'm using a data attribute on the html element as a guard, indicating whether the theme has been set yet and to allow a default / fallback theme when JavaScript is disabled. I tried using the theme switcher event handler to persist the theme session directly, but it really does have to be done the way you've done it - or there will be mismatched server and client classes in the theme switcher itself.

Most of the code lives here... https://github.com/infonomic/remix.infonomic.io/tree/develop/app/ui/theme/theme-provider

An even cooler solution might be to put a Remix-style form around the theme switcher button and submit the action to set the theme session there - which would mean the entire thing would work fine without client-side JS (it almost does now).

Would be interested to know what you guys think. Thoughts or suggestions most welcome - and no hard feelings at all if this is all a terrible idea. heh.

I've reverted back to a 'normal' entry.server.tsx for now Michael - although I've seen your updates here https://github.com/kiliman/remix-hydration-fix and will be testing this with the new setup soon.

Hope some of this helps.