How to support dark mode on your website

Dark and light color schemes are not yet widely supported by browsers. Nonetheless when coded correctly it will bring no harm to your website and will actually allow users to enjoy custom color schemes.

How to enable system dark mode

This blog supports color schemes also, so if you are Mac + Firefox, Safari or Windows + Firefox user (as of 2019) you can enjoy the dark mode here after you enable it in your system:

How to code dark mode

It’s pretty simple, all you need to do is to use prefers-color-scheme media query and override your default code using CSS precedence. You actually need to use precedence to not break your website in 99.9% of browsers that do not support dark color schemes.

Technically correct but overall BAD example (does not use CSS precedence)

// this is technically correct, but will break
// your website in browsers that do not support
// dark and light schemes

body {
  font-family: sans-serif;
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: black;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

Technically correct and OK example (uses CSS precedence)

Notice that there is no distinction between dark and light themes. Instead, the light code is default and dark code overrides it - this way browsers that do not support dark theme will be fine:

// this way browsers that do not support dark
// theme will default to light theme

body {
  background: white;
  color: black;
  font-family: sans-serif;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

Summary

Hello darkness my old friend! :) I hope the article helped.