This webbed site now supports dark mode!
I know, it's not much of a revelation, but for someone who has been working hard to ensure this site is as backwards compatible as possible, I've been hesitant to add more styles than is absolutely necessary. But, after some thought, I recognized that dark-mode is a relatively minimal change with high-impact results.
How did I do it? Well, thanks to the magic of CSS (*insert magician's flourish here*), dark-mode can be enabled with just a few lines of CSS that (for the curious) get ignored by legacy browsers that don't support it:
@media (prefers-color-scheme: dark) {
body {
background: #222;
color: #eee;
}
}
Honestly, that's it. For users that have dark-mode enabled in their browser or operating system, the site simply swaps the contrast of the background and text color. Personally, I didn't like the default green that this site uses so I also tweaked the link color to a nice amber:
@media (prefers-color-scheme: dark) {
body {
background: #222;
color: #eee;
}
a {
color: #fb0;
}
}
Again, nothing fancy, but as someone who uses dark-mode on a few devices, it's been nice not to get blasted in the face by a bright-white light every time I open my homepage.
--
If you like this post or one of my projects, you can buy me a coffee, or send me a note. I'd love to hear from you!