Dark Mode "Match System" with `prefers-color-scheme`

[joshua-dean]

I have noticed a few websites and web apps with dark mode options like:

• Dark Mode
• Light Mode
• Match System Default / Automatic

A cursory google search shows this is possible via the prefers-color-scheme CSS "media feature".

I think a reasonable way to utilize this would be:

• Use the "dark mode" cookie if it's set, either "light" or "dark"
• If the cookie is not set, see if prefers-color-scheme can be used
• If all else fails, light mode (current default)

An alternative:

• Cookie sets "light"/"dark"/"auto"
• If the cookie is not set, light mode

The cookie is either set/unset right now, so it would have to change to be unset/light/dark (or light/dark/auto), and it probably would be a good idea to allow the user to set it to automatic (e.g. if their system auto-sets the mode based on time of day / light level or something). Allowing the user to set all 3 states is a bit of a Pandora's box as the current UI is a minimal toggle switch.