Dark mode

[awaitlink]

Implement a "dark" appearance:

• Match the system appearance via the @media-query;
• Maybe also add an option: system/light/dark.

[Leptopoda]

Seems like you use tailwind,
I'm not familiar with it but doesn't it have a dark tag for auto dark mode based on media-query?

I might be wrong with that though

Edit:
Looking at the docs, you have to enable the module first 🙃. I'll have a look at it tomorrow.

[awaitlink]

Looking at the docs, you have to enable the module first 🙃.

Indeed; though after enabling it in either media or class mode, the dark appearance itself generally has to be implemented manually:

• By adding relevant classes with dark: (like dark:bg-gray-900).
• I'm also using tailwindlabs/tailwindcss-typography, which would need its colors changed as well and will likely require customizing it, maybe like described in Dark Mode tailwindlabs/tailwindcss-typography#69 (comment) or other comments in that issue.

---

However, in that issue I've also stumbled upon jjranalli/nightwind, which seems like it would do all the re-coloring automagically and seems to use the class mode. Maybe it would be easier to use it and then tweak colors in individual cases if needed (which it also supports). It also includes helper functions for switching the mode, which would probably need to be used like in yew's js_callback example (since the app uses Rust/WASM and the helper functions are in JavaScript).

Though the helper functions don't seem to support resetting the preference to "system" mode, which I think would be nice to have:

• No way to clear selected mode to let device preference take control jjranalli/nightwind#31