Adding "dark mode" to my blog

I saw Jeremy Keith's post about adding dark mode to his blog and it seemed simple, so I decided to give it a whirl.

Here is the diff of the work for all to see. It was surprisingly easy (outside of silly errors on my part). There was a small refactor to support CSS variables and ensuring I have fallback if there's a browser that doesn't support CSS custom properties, but that is about it. I did pretty much the same thing that Jeremy did.

There was no DevTools support in Chrome that let me emulate dark-mode being set (I hear it's coming), so I created a simple CSS class that I could add to my HTML element to quickly test it working (as seen below).

@media (prefers-color-scheme: dark) {
  html {
    --background-color: rgb(36, 36, 36);
    --text-color: #fefefe;
    --block-quote-before-color: #333;
    --link-color-visited: #7ad857;
    --post-shadow: #333;
  }

  .post.moi a[rel=me] img {
    filter: invert(0.8);
  }
}

html.dark {
  --background-color: rgb(36, 36, 36);
  --text-color: #fefefe;
  --block-quote-before-color: #333;
  --link-color: #1bcba2;
  --link-color-visited: #7ad857;
  --post-shadow: #333;
}

html.dark .post.moi a[rel=me] img {
  filter: invert(0.8);
}

Not dark-mode

dark-mode