Website Redesign: Dark Mode

January 2, 2020

I decided to jump on the ol’ bandwagon and implement a Dark Mode feature on this site. I’ve been interested in it for some time because, well, I use Dark Mode just about everywhere that offers it, from my computer and phone to specific apps, like Notion. I find it easier to read, especially these days, as my eyes have started showing signs of wear and tear.

There are different ways to implement dark mode, of course:

  • Using the prefers-color-scheme media query to set it according to a user’s operating system preferences
  • Adding a JavaScript-powered solution that swaps colors when clicked

I really like the idea of the second method because it opens up the possibility of other color themes down the road. At the same time, I like leveraging native browser features, so I went with the first method.

Turns out creating a dark mode with prefers-color-scheme is pretty darn simple. I sorta wonder why I waited so long. Although, I suppose I can say that after six years of leaving this site neglected.

Make some custom properties

Here’s how I made it happen. First, I used CSS custom properties to create variables for all of the colors I’m using in the design:


Check out this ancient post of mine for more on my color-naming philosophy. It’s clearly evolved over time.

Once I had those in place, I abstracted them further into functional use cases. This allows me to update color values or swap out one color for another without needing to track them down in the code.


Good so far, right?

Make some more custom properties

All that’s really left is to copy that second set of properties and paste them inside the prefers-color-scheme media query and change the values when dark mode is the selected preference.


Ugh, that’s it

Seriously, that’s it. Now, when a user is in light mode, they get this:

Homepage screenshot in light.

…and when it’s dark:

Homepage screenshot in dark.

Would a button that toggles modes be cool? Sure! But that’s not what I was going for here. That said, I am indeed considering a San Francisco Giants mode in a future iteration. ⚾️