This site now supports Dark Mode.¹

Here is the implementation:²

@media (prefers-color-scheme: dark) {
    body {
		color: $text-primary-color-dark-mode;
		background-color: $background-color-dark-mode;
    }

    .main-layout {
		background-color: $background-color-dark-mode;
    }

	// Some more SASS ...
}

These days, I code at my desk, next to the crib where my baby sleeps. This is to say, Dark Mode has recently entered my life in a big way (as has turning my monitor to 50% brightness 😪).

I worked as a web developer between ca. 2012 to 2019, so when I had the idea to implement a dark mode, I had some antiquated ideas about how to go about it.

At the very least, I didn't expect it would be trivial to implement.

See, this is a static site, built on Jekyll, and served via GitHub Pages. You can actually view all of the code. Static sites, at least this very simple & naive one, lack things like calls to a server (cookies), so 'user settings' are not something I can whip together without changing the architecture in a (for me) significant way.

I could - as I first considered and as Claude suggested - use browser storage to write & read the user's preference with a 'Dark/Light Mode' toggle button. However, this would require 1) using web storage and 2) showing & wiring together a toggle button. This felt like work.

Googling, in this case, turned up a simple answer I couldn't have imagined existed:

[https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme]

Wow! I've been out of the web development loop for about 5 years now, peeking back every once in a while, and apparently quite a lot has happened unbeknownst to me!

With 15 minutes of hacking and pushing up code, I am pleased with the result:

In this day and age, with framework rot and enshittification everywhere we look, it feels heartening to me to see examples where foundational tech is evolving towards powerful simplicity.