Foldable.dev

Web Development

Add Support For Dark Mode & Light Mode With Media Queries

Now that operating systems are offering dark or light modes, there's a way to support a user's preference by using the prefers-color-scheme media feature.

Here's an example of how to target dark and light modes:

/* These are the default styles */
body {
  background: #eee;
  color: #222;
}

/* Dark color theme users get this one */
@media (prefers-color-scheme: dark) {
  body {
    background: #000;
    color: #fff;
  }
}

/* And light theme users get this one */
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
    color: #000;
  }
}

Useful Links