downforacross / downforacross.com

Web frontend for downforacross.com -- continuation of stevenhao/crosswordsio
https://downforacrosscom.downforacross1.now.sh
MIT License
220 stars 92 forks source link

Add dark mode preference with localStorage #259

Closed pkmnnerd closed 1 year ago

pkmnnerd commented 1 year ago

Let users save their dark mode preference to local storage, adding the following improvements:

  1. When you start a game, the dark mode status will stay the same (right now it switches back to light mode)
  2. Users will maintain their dark mode preference when they leave the site and come back
  3. Gives users the option to set dark mode based on their system preference

This uses a new localStorage key "dark_mode_preference", with '0' being always light, '1' being always dark, and '2' being the system default.

Setting the URL with ?dark=1 will start the page in dark mode, but will not change the stored preference, maintaining the previous behavior. The button to change the preference will now show the current preference.

Also bumped nvmrc from 12 to 14 to match https://github.com/downforacross/downforacross.com/commit/29fff0a357d0a3fb33e0f050264ec06e65120759.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
downforacross.com ✅ Ready (Inspect) Visit Preview Jan 12, 2023 at 6:22AM (UTC)
stevenhao commented 1 year ago

tried it out on the preview deployment, it looks great. thanks!

there's some spots missing as far as dark mode support goes -- and as a light mode user personally i didn't put too much thought into picking the colors for dark mode. so if you (or anyone else) is interested in helping out there it'd be much appreciated!

in terms of styles -- https://github.com/downforacross/downforacross.com/pull/222 and https://userstyles.world/style/2539/downforacross-dark-mode seem to have some opinions on what colors would look best. would love to see this make it into prod!

once the dark mode css is a bit more polished i'd be happy to make the dark mode toggle an icon on the top nav bar instead of the "secret link" that currently is.

pkmnnerd commented 1 year ago

Sure thing, I think those suggestions look better than the current dark mode. I'll see what I can do