enhancement(switcher): implementing dark-light switcher for remote

[grantlouisherman]

hey @peterpeterparker let me know what you think.

[peterpeterparker]

@grantlouisherman really cool!

before merging (the switcher itself looks neat 👍 ) I have just have one request, if you allow me.

instead of defining a new .dark style, could you use the already defined default dark mode (defined with @media (prefers-color-scheme: dark)) ?

[grantlouisherman]

Hey @peterpeterparker so it doesn't seem like I can set media types with js, but I can add something that if that media exist to set the toggle to dark. Unless you know of a way to set a media with js? I just couldn't find a way. It seemed like all the material I read was more for detecting if that media preference existed as opposed to setting one

[peterpeterparker]

@grantlouisherman I'll have a look tomorrow morning and will keep you posted

[grantlouisherman]

This is what I found in terms of interaction with media queries: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

It seems like you can add listeners or remove listeners, but you cant specifically add a media query via the DOM api. One example I saw was to create a separate style sheet with the preferred media behavior and inject that into the DOM , but I think that is over engineering the problem.

Let me know what you find.

[peterpeterparker]

@grantlouisherman I think the media query listener is probably the way. When the app load, we should check the current state if dark or light and then if dark, set the .dark as you do in your PR. Of course only if the user didn't already selected a style using the toggler.

Then, to finish the transformation, we should move the current css from @media (prefers-color-scheme: dark) to .dark

So basically we only use the prefers-color-scheme to test the platform preferences but to apply the css we use .dark.

Does that make sense you think?

[peterpeterparker]

Awesome @grantlouisherman 👍 Thx a lot for the amazing work 🙏

I'll continue this in the UX refactoring #228 but damn it's cool!