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:

[[code]]czoyODQ6XCI6cm9vdCB7CiAgLS1yZWQ6ICNmZDFlMWU7CiAgLS1vcmFuZ2U6ICNmZDVhMWU7CiAgLS1ncmF5LWxpZ2h0ZXN0OiAjZjd7WyYqJl19ZjJmMTsKICAtLWdyYXktbGlnaHRlcjogI2U4ZTNlMTsKICAtLWdyYXktbGlnaHQ6ICNjYWJkYjk7CiAgLS1ncmF5OiAjYjBhM2EwO3tbJiomXX0KICAtLWdyYXktbWVkaXVtOiAjN2Q3NDcyOwogIC0tZ3JheS1kYXJrOiAjNjE1YTU4OwogIC0tZ3JheS1kYXJrZXI6ICM0NjNlM2I7e1smKiZdfQogIC0tZ3JheS1kYXJrZXN0OiAjMjIxZDFiOwogIC0td2hpdGU6ICNmZmY7CiAgLS1ibGFjazogIzAwMDsKfVwiO3tbJiomXX0=[[/code]]

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.

[[code]]czo0NTI6XCI6cm9vdCB7CiAgLyogc2FtZSBhcyBiZWZvcmUgKi8KICAtLXByaW1hcnktY29sb3I6IHZhcigtLW9yYW5nZSk7CiAgLS17WyYqJl19dGV4dC1jb2xvcjogdmFyKC0tZ3JheS1kYXJrZXN0KTsKICAtLWJhY2tncm91bmQ6IHZhcigtLWdyYXktbGlnaHRlc3QpOwogIC0tc3tbJiomXX1pdGUtdGl0bGU6IHZhcigtLWdyYXktZGFyayk7CiAgLS1ib3JkZXItY29sb3I6IHZhcigtLWdyYXkpOwogIC0tbGluay1ib3JkZXI6e1smKiZdfSB2YXIoLS1wcmltYXJ5LWNvbG9yKTsKICAtLWxpbmstY29sb3I6IHZhcigtLXRleHQtY29sb3IpOwogIC0tbGluay1ob3ZlcjogdmF7WyYqJl19cigtLXdoaXRlKTsKICAtLWxpbmstY3VycmVudDogdmFyKC0tZ3JheS1kYXJrZXN0KTsKICAtLWNvZGUtYmxvY2tzOiB2YXIoLS13aHtbJiomXX1pdGUpOwogIC0tZXJyb3ItY29sb3I6IHZhcigtLXJlZCk7CiAgLS10YWJsZS1iYWNrZ3JvdW5kOiB2YXIoLS1ncmF5LWxpZ2h0ZXIpe1smKiZdfTsKfVwiO3tbJiomXX0=[[/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.

[[code]]czozMTA6XCJAbWVkaWEgKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKSB7CiAgLS10ZXh0LWNvbG9yOiB2YXIoLS13aGl0ZSk7CiB7WyYqJl19IC0tYmFja2dyb3VuZDogdmFyKC0tZ3JheS1kYXJrZXN0KTsKICAtLXNpdGUtdGl0bGU6IHZhcigtLWdyYXkpOwogIC0tYm9yZGVyLXtbJiomXX1jb2xvcjogdmFyKC0tZ3JheS1saWdodGVzdCk7CiAgLS1saW5rLWNvbG9yOiB2YXIoLS13aGl0ZSk7CiAgLS1saW5rLWN1cnJlbnQ6e1smKiZdfSB2YXIoLS13aGl0ZSk7CiAgLS1jb2RlLWJsb2NrczogdmFyKC0tYmxhY2spOwogIC0tdGFibGUtYmFja2dyb3VuZDogdmFyKC0tZ3J7WyYqJl19YXktZGFya2VyKTsKfVwiO3tbJiomXX0=[[/code]]

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. ⚾️