Automatic Dark Mode

A short time ago, this post about one-line dark mode by Akhil Arjun on Dev.to showed up. Until today, I was using this multi-line version:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(180deg);
  }
  img,
  picture,
  video {
    filter: invert(1) hue-rotate(180deg);
  }
}

The img, picture, video part inverts those elements again, so that they come out with the original colors.

I’ve decided to remove that color scheming from this site, as I just wasn’t happy with how it was coming out.