Tip 022 - Dark Mode

Nowadays Dark Mode is kind of a thing. Both Windows and Macs have options for a Dark Mode now, as do most smartphones out there. When it comes to website styling, how do you go out and make one? Turns out we've got a new-ish media query:

/* Styles that just always are */

@media (prefers-color-scheme: light) {
  /* Styles that make the colors light */
}

@media (prefers-color-scheme: dark) {
  /* Styles that make the colors dark */
}

You can also set prefers-color-scheme: no-preference, but that doesn't seem to accomplish much - since the system settings in the OS to change color schemes is a "light" or "dark" option without any in-between. That could change in the future though.

 

---

Have you written a reply to this post? Send me the URL here:

Reply URL Send