Enable dark mode for your website 🖤

Probably 2019 is the year where "dark mode" went mainstream and every OS, app & website introduced a dark theme. Now it's not just the programmers that can enjoy a nice dark theme, but really everyone!

I recently learned that you apparently can detect quite easily with a media query what color scheme the browser prefers. I've quickly tested it on my website and it definitely seems to be working at least for macOS 10.14, Windows 10 & iOS 13. And if it doesn't too bad, progressive enhancement ftw 🚀✨!

856094c8-851a-4870-be74-d278a1cce7ac.gif

So if you're using dark mode and your browser supports it you're probably seeing a dark version of this website. It was originally meant to be just white 🤷‍♂️. But anyway, without further ado, the only thing you really need to know to add support for dark mode is the existence of the following media query!

@media (prefers-color-scheme: dark) {
  /* lights out */
  background: #000;
}

Time to turn off the lights 🌙!