DEV Community

Elsa Gonsiorowski
Elsa Gonsiorowski

Posted on • Originally published at gonsie.com on

Automatic Dark Mode for Your Website

With HTML5 filters and media quieries, it’s simple to enable an automatic dark mode on your website. Use the following CSS snippet:

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

Enter fullscreen mode Exit fullscreen mode

It’s not perfect, but rather a quick and dirty way to stop blinding yourself when you’re editing your website at 2 am.

Discussion (1)

Collapse
lonelydev profile image
Eakan

very clever trick!
thank you 👍