Tip 022 - Dark Mode
Posted
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.