[FEAT] Dark mode without JS

[iacore]

Describe the bug Without Javascript, the page is ouch my eyes system color scheme is dark i expect the page to be dark

To Reproduce Steps to reproduce the behavior:

1. Firefox
2. Disable Javascript
3. go to https://hearch.co/
4. Open developer tools, Inspector, Rules, click the "moon" icon

Expected behavior The page should turn dark.

Screenshots

What's your setup? (please complete the following information): https://hearch.co/

Additional context I think the default should be to use system color scheme with CSS.

At the very least, put this at the top of the site's CSS file:

:root {
  color-scheme: light dark;
}

[iacore]

https://github.com/hearchco/frontend/blob/d622f9fd524bf9e56b81e8a59574a59446ddae04/src/lib/components/themetoggle/main.svelte#L41-L44

Please don't override the default browser theme please.

Solution:

body {
  color-scheme: light dark;
}
body.light {
  color-scheme: only light;
}
body.dark {
  color-scheme: only dark;
}
@media (prefers-color-scheme: light) {

}
@media (prefers-color-scheme: dark) {

}

[aleksasiriski]

I tried it but as I've already stated, TailwindCSS uses class mode to allow JS to switch the theme which means that @media in CSS does nothing. With this PR I've made the default theme dark at least, until we find the right solution (maybe 2 CSS files, one for noJS and other for JS users).

I also tried the same CSS you provided but using "html" instead of body, since that is where TW stores the "dark" class

[aleksasiriski]

Also to explain, previously we only used media queries in CSS like you're proposing, but we got reports from users wanting to change to dark theme even though they have the system theme as light (and they want to keep it that way). That is the reasoning for doing themes with JS instead of just following the system theme using pure CSS. Even though we want to support as much functionality as possible w/o JS, this is what makes the larger group of users satisfied.

I think the proper way to support both would to generate 2 css files, one for nonJS users using media queries and the second which gets replaced by JS for the JS users (same as the currently generated CSS file). Idk how this would be implemented but I think it's doable, sadly I don't have the time to do it these days so if anyone finds this comment and wants to try it you're more than welcome to contribute.