Development Log: Dark Mode Website

I spent a little time tonight adding some dark mode colors to the website. I did it the slightly hard way, using this Iconfactory post and then ignoring all the actual good advice about using color variable. It works in Safari and Chrome on Mojave or Catalina and in Safari on iOS 13.

The colors generally match the upcoming dark mode in the app.

Several posts have images without transparent backgrounds, so I’ll have to be more careful about that in the future.

I also switch out the App Store, Apple Books, and Kindle badges based on appearance. I’m using a fairly brute force method, but it works well enough: I just include two sets of img tags, and give each a class, .appearance-light or .appearance-dark. Then in my CSS, for the dark appearance I have display: none;, and in the @media (prefers-color-scheme: light) code, I switch have the dark appearance change to display: inline (could also be block depending on needs) and have the light theme set to display: none. It’s not tremendously clever and it makes you load both images, but they’re small and it works for now.