Adding a Dark Theme to the Biking Weather Suitability Forecast Application
Having read a few articles online about offering a dark theme as part of improving accessibility for certain people, I decided to add a dark theme option both for my website overall, and for the Biking Weather Suitability Forecast application. I will discuss what steps I took to add this to my web application; similar changes needed to be made for overrides to the default theme CSS and script files for the general website. The easiest thing to do was to download the dark version of the "Powered by Dark Sky" icon. This will likely need to be removed in a few months, after Dark Sky stops their "grandfathered" API support at the end of 2022. Next, I added some overrides at the bottom of my main.css file for the case when the user-specified preferred color scheme is dark , such as when choosing "dark mode" on an iPhone or Mac. /* Dark mode color scheme */ @media(prefers-color-scheme: dark) { body, .card, .table, caption { background-color: black; color:...