Website Redesign: Dark Mode
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-schememedia query to set it according to a user’s operating system preferences
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:
…and when it’s 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. ⚾️