robohash image acting as kam's profile photo

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 on another site? Put the URL here: