Dark mode’s awesome, I love it. On every website I make I started implementing it. But why? I think, that the biggest part of that is the fact, that having a dark background is 1) something new, and 2) it feels natural - if it’s dark outside, then it’s nice to have dark mode on.

In this article, I want to share a couple of tips for implementing dark mode on your websites. First, probably the most important thing of all is the prefers-color-scheme media query. It is supported in most browsers, including iOS Safari and Chrome on Android. The latest addition was on the brand new version of Edge. For most occasions, it will be enough just to copy this script:

and for extended use with applying effects to images and links: