Make a website dark according to user preferences

- Posted in web

In macOS Mojave, you can set your preference to dark UI.

You can target this preference with CSS using code like this:

@media (prefers-color-scheme: light) {
  body {
    background-color: #FFF;
    color: #000;
  }
}

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

See this Codepen for a demo.

This only works on Safari 12.1 for now, which you can get by downloading Safari Technology Preview.

Leave a Reply

Your email address will not be published. Required fields are marked *