MacOS Mojave comes with the OS wide “dark mode” which sounds pretty awesome, I’m still on High Sierra. But I’m gonna update it soon, it’s already downloaded itself onto this Mac, and I want my disc space back.
That said, even with dark mode on, you’re going to be blinded with with a suddenly bright websites. For that, Safari is going to have a special media query for color scheme. First, you need to [download Safari Release 68] and making sure that Dark Mode CSS Support is turned on in the Develop > Experimental Features menu, and then you can add the following into your CSS:
div {
background-color: pink;
}
@media (prefers-color-scheme: light) {
div {
background-color: yellow;
}
}
@media (prefers-color-scheme: dark) {
div {
background-color: purple;
}
}
How simple is that?! I’m just touching the surface for the overall implementation, if you want to do this right, please read further into it.