sopel-irc / sopel-help

Help plugin for Sopel
Other
0 stars 1 forks source link

add HTML meta tag for automatic light/dark mode #8

Closed ghost closed 9 months ago

dgw commented 9 months ago

While I haven't directly tested this, the tag seems to function as intended on other pages I've seen using it. It's a very simple way of respecting the user's system-level theme preference without resorting to CSS nonsense, and is fairly well supported in major browsers now. https://caniuse.com/mdn-html_elements_meta_name_color-scheme

ghost commented 9 months ago

Works great. :) The look will vary by browser since they all use their own color schemes, but here's Firefox on macOS:

https://github.com/sopel-irc/sopel-help/assets/113205165/9df4bbcd-d25a-4fd6-8187-901140afebd7

Edit: and toggling light/dark modes:

https://github.com/sopel-irc/sopel-help/assets/113205165/6f6c773d-2bb8-4f6e-bff7-7bd54c0dae22

Edit 2: and another one toggling the preference within Firefox itself, rather than system-wide:

https://github.com/sopel-irc/sopel-help/assets/113205165/99ae8e92-7413-4876-86d0-ba04badb6528

dgw commented 9 months ago

Yep, good demos.

Decent CSS to pretty up the list a bit will be someone else's problem. 😝

ghost commented 9 months ago

Decent CSS to pretty up the list [...]

Bare minimum: needs to be a React project with 4GB of imports.

Exirel commented 9 months ago

I wanted to reword the commit and I think I more or less messed-up...

... but the change is in master now! So consider this PR merged. Not closed. I swear.