I’ve added a dark mode to bradbice.com, as well as some quick and simple ratings comparisons.

Dark mode

My website has been a little too bright lately, so I’ve implemented a dark mode which will activate according to your OS settings. Thanks to CSS custom properties and the (prefers-color-scheme: dark) media query, this was really simple to do and was completed in about 30 minutes and around 20 lines of CSS. Most of the time was coming up with alternative colors (granted mostly shades of black, gray, and white at this point) and checking color contrast ratios.

I hope it’s a little easier on your eyes if you’re viewing the site at night or if you’ve turned the rest of your computer dark.

Movie comparisons

My other side project is rating movies. Here I’m collecting every movie I’ve ever watched in my entire life, documenting them, and rating them. My wife will join in when we watch the same movie together.

At times, I may want to compare movies of a certain run, certain eras, that have similar actors, etc. Now I’ve created a simple shortcode in Hugo that allows me to do that by passing in a list of movies like so:

blog-movies "batmanbegins:thedarkknight:thedarkknightrises"

78%

93%

57%

Now I can compare any types of movies, and as many as I can list (as long as I’ve already rated them).

87%

87%

89%

However, as of this writing I’ve only rated 153 of 737 movies (21%), so I’ve got a ways to go before I can fully utilize this feature.