Dark Mode (Prefers Color Scheme)

Mar 24, 2019 · 169 words · 1 minute read

Dark mode is everywhere and on everything. I feel like anytime I use a new website or app that I immediately go and look for a dark mode. MacOS Mojave brought dark mode to the OS system last year. Apps, of course, started to update to be able to detect when the switch but how can we detect that switch on our sites.

We have a media query that can help us. The support for this is rough at the moment only in the latest Firefox and a Safari beta.

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

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

@media (prefers-color-scheme: no-preference) {
  .container {
    background: black;
    color: white;
  }
}

The code is very simple for this. As you can check if it is light/dark or has no color scheme preference. There is some talk about implementing this into Chrome as well.

Resources

prefers-color-scheme

Can I use… Support tables for HTML5, CSS3, etc