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.

Since I switch to Tailwind, I’ve simply used the provided dark mode which uses prefers-color-scheme.