Dark Mode and other site updates

Inspired by iOS’s new dark mode (and halloween!), I decided to a dark mode to the website using the new prefers-color-scheme media query. It was surprisingly easy to do. After I’d changed the

This took care of 90% of it:

@media (prefers-color-scheme: dark) {
  html {
    background-color: #19222b;
    color: #eee;
  }

  .page-wrapper__inner {
    background-color: #222f3b;
    color: #eee;
  }
}

Using a straight black-and-white background and foreground combo looks too harsh on the eyes, so you want to find a gray-ish background. Mine is a bluish-grayish color that matched well with some of the existing highlight colors on the site.

Then it was a matter of browsing through the site and finding UI elements that didn’t look right. It took me less than 30 minutes in total.

Also, I decided to merge my blog, which was split into “articles” and “work journal” entries, back together. It was more trouble than it was worth. Sorry if this messed up the RSS feed.

In case you’re on an OS or browser that doesn’t support prefers-color-scheme, here’s a screenshot:

Screenshot of Dark Mode on my website