Joining the dark side with prefers-color-scheme

Since when can I use Dark Mode with prefers-color-scheme?

The first browsers that have started to support Dark mode are Firefox Nightly 67 and the latest version of Safari on Mac. Mozilla Firefox 67 is expected to be released on May 14, 2019. Apple introduced Dark Mode support within websites in Safari on March 25, 2019, for macOS. Dark Mode can be used on both Mac and Windows 10.

Dark Mode on my blog

As you can see in the image above, I’ve added Dark Mode to my blog. This was relatively easy to do using CSS Media Queries. If you’d like to test it, you can do so with the latest Firefox Nightly or Safari. Below, I’ll briefly explain what’s needed to implement Dark Mode on your own website. Some knowledge of HTML and CSS3 is required.

How do I add Dark Mode to my website?

Implementing Dark Mode isn’t very complicated. Dark Mode uses the CSS3 Media Query prefers-color-scheme. When you apply it as shown below and define the desired styles for your dark-themed website, you’ve taken a solid first step. Generally, you only need prefers-color-scheme: dark since the light variant is typically the default display

@media (prefers-color-scheme: dark) {
  body {
    background-color: #202020;
    color: #eeeeee;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #efefef;
    color: #202020;
  }
}​​

Which colors should I use for Dark Mode?

As base colors for the Dark Mode version of the website, I recommend the color #202020. This color isn’t too dark but is dark enough to appear neutral. The text color is slightly darker than pure white, for the same reason—to give the colors a softer appearance. You definitely don’t want the white letters to burn into your eyes.

Questions about Dark Mode?

If you have any questions after reading this article or need help applying Dark Mode to your own website, feel free to contact me.