LukeberryPi/phived

QOL: Use `darkMode: media` for automatic theme detection

Closed this issue · 2 comments

Most of the people don't enjoy when they use Dark mode on virtually anything they use and they enter a new product that shines out loud brightness on your face :c

Although solving this is dead-simple as changing darkMode to media in tailwind.config.cjs, since class is hard-coded, I decided to open a issue before a PR to check if this is proposital or not

you have the green light to do this. i have been postponing this forever.

it is important to me that localStorage is prioritised over the OS setting (if localStorage is defined)

this means that:

  • a user accessing the website for the first time (has no localStorage information) will load the light/dark mode corresponding to their prefers-color-scheme
  • for a user reaccessing the website, if they have a localStorage preference (e.g: they clicked the light/dark mode toggle at least once) that is what will be loaded. even if the prefers-color-scheme says otherwise.

example: user has dark mode preferred on system > first load is dark mode > user clicks the "light mode" toggle on phived > closes the website

regardless of the OS setting, all future loads will be light mode, until they click the "dark mode" toggle (or clear their cache, which would clear localStorage information as well).

I can make this @LukeberryPi !