alar-dict / alar.ink

dictmaker site theme for alar.ink (Kannada-English dictionary)
https://alar.ink
MIT License
39 stars 12 forks source link

Dark mode #12

Open sharmaeklavya2 opened 7 months ago

sharmaeklavya2 commented 7 months ago

I would like alar.ink to support dark mode, i.e., light text over a dark background.

Dark mode is more comfortable to read in low-light environments, like at night. Prominent websites and OSes these days support dark mode, so it's a little jarring when I switch from other browser tabs or windows to alar.ink and the screen is suddenly much brighter.

There are two ways we can implement this:

  1. Use prefers-color-scheme for conditional styling. This is the simplest way and only requires changing the CSS.
  2. Add a dark mode toggle button somewhere on the page. This gives the user more freedom to pick the mode they want, but requires using localStorage to keep track of their preference across requests. It's also unclear to me where to add the toggle button. Most websites add it to their site's header, but alar.ink doesn't have a header.

@knadh Let me know if you're willing to have this feature on alar.ink. If you're too busy to implement it, I can do it and send a pull request (though it could take me a few weeks, since my free time is limited). If you'd like me to implement it, please let me know whether you want to go with method 1 (prefers-color-scheme) or method 2 (toggle button).

knadh commented 7 months ago

Thanks @sharmaeklavya2. You can send a PR once the big pending update to this repo is done. Please see https://github.com/alar-dict/alar.ink/pull/11#issuecomment-1987785119