Updated 2026: This site has since migrated from WordPress to Hugo. The dark mode support was preserved through the migration; the Hugo theme respects
prefers-color-schemeautomatically. The WordPress-specific notes below are kept for historical reference.
I’ve been using system-level dark mode on all my devices for a while, switching automatically based on the time of day. Most applications and websites now respect this preference, but until today, this site didn’t.
After an evening with Firefox Developer Tools, a color picker, and some help from someone who understands color theory better than I do, the dark variant is live.
If your browser communicates a preferred color scheme to websites, you’ll see this site in the right theme automatically. No toggle, no cookie, no JavaScript; it’s handled entirely in CSS. If your browser doesn’t communicate a preference, the default light theme is used.
How it works Link to heading
The prefers-color-scheme CSS media query lets a stylesheet respond to the user’s operating system color preference. All the dark-specific rules live inside a single media block:
@media (prefers-color-scheme: dark) {
a, .site-info > a {
color: #33C9FF;
}
/* ... */
}
The browser checks the OS preference, applies the matching CSS, and the user sees the right theme without any server-side logic or client-side scripting.
Browser support for prefers-color-scheme is now universal across all modern browsers, so there’s no real reason not to implement it.
If you notice anything that looks off in the dark variant, let me know.
