projecthorus / chasemapper

Browser-Based High-Altitude Balloon Chase Map
GNU General Public License v3.0
107 stars 24 forks source link

Dark Mode #31

Open darksidelemm opened 3 years ago

darksidelemm commented 3 years ago

Some kind of Dark Mode for chasemapper would be useful. Something that can be used on a tablet, in a car, at night - without blinding the operator.

Maybe @LukePrior has some ideas on this one?

Main things to do would be:

LukePrior commented 3 years ago

The Stadia.AlidadeSmoothDark map from Stadia Maps which requires a free API key has been added.

In terms of icons, I just changed darker components to lighter shades and kept the rest the same. The way I handled logic was by first checking if the user had set a preferred light/dark mode and if that was unavailable it would default to checking the browser/device preference. To actually change the CSS I mainly used jQuery as seen here and also some CSS rules here. I remember having to use both of these to get it working in all cases.