Adding system agnostic dark mode without js

[hibatos]

Hi,
first of all, awesome project, thanks for that.
But for all the praise I too have an improvement idea.

The current dark mode implementation purely bases on javascript execution in the browser.
This is a bit unfortunate, as some frameworks or tools such as SvelteKit expressly define themselves as being useable without frontend js execution.

This could be fixed rather easily by changing the dark mode configuration in the tailwind config from this:

...
const config = {
	darkMode: ["class"], // from this
	content: ["./src/**/*.{html,js,svelte,ts}"],
	safelist: ["dark"],
	theme: {
...

to this

...
const config = {
	darkMode: ['variant', [                                                //
             '@media (prefers-color-scheme: dark) { &:not(.light *) }',        // to this
             '&:is(.dark *)'                                                   //
 	]],
	content: ["./src/**/*.{html,js,svelte,ts}"],
	safelist: ["dark"],
	theme: {
...

as mentioned in the tailwind docs: https://tailwindcss.com/docs/dark-mode#using-multiple-selectors

As far as my testing goes, this does not have any adverse effects.

Regards
hibatos

[ieedan]

I don't think this library is usable without JavaScript.

[hibatos]

I don't think this library is usable without JavaScript.

Right, I have not thought of that...
I disabled js for testing and the rendering looked mostly fine, the functionality was limited, sure, but most still worked.

If people here don't use this feature, the request might be irrelevant.

Although I do think this is a more sane solution for doing the system default theme query in general.

[huntabyte]

I'm pretty sure JS would be required to get all the functionality that mode-watcher provides, which extends beyond just the system. This is great but doesn't cover the conversion of scrollbars and other native elements into the "application selected" theme, so you may end up with light-mode scrollbars on a dark-mode app and vice versa.

You can feel free to implement this yourself in your apps though! mode-watcher isn't forced on you to use, just there if you wish!