I just pushed an update to my site to add support for dark mode. If a user visits the site while their device is set to prefer a dark color scheme, they'll receive a specially designed version of the site. I was inspired to dig into this after viewing a WWDC video about dark mode and web content.

It's a super easy to add styles for dark mode using prefers-color-scheme. A rule set in Sass would look like this:

.project-link {
    background: #282a36;

    @media (prefers-color-scheme: dark) {
        background: #fff;
    }
}

At the moment, the support isn't great. The latest versions of Safari and Firefox have it included. On the horizon, however, it appears that Chrome will be adding support. With other browsers, like Edge, taking advantage of the Chromium rendering engine, support will spread rapidly.

Although the prefers-color-scheme media feature (PS, just learned that that's what these things are called) is the best way to adapt styles for dark mode, there is also a color-scheme style property. By adding it to the :root selector, you could communicate that your entire site supports (or doesn't support) dark mode. One advantage of communicating this is that browser-based elements like form controls will adapt accordingly.

The rule set for color-scheme would look like this, thank you webkit.org:

:root {
    color-scheme: light dark;
}

The color-scheme property is still in a draft, so I'm not sure when we'll see it widely adopted. It's good to know that it's coming though, as it helps to provide full dark mode control.