Apple today released macOS Mojave 10.14.4. But I’m interested in this part:
Safari:
— Adds Dark Mode support for websites that support custom color schemes
It’s a cool thing if you care about your website because with the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme. This feature lets us detect if the user sets Dark Mode on his Macbook or iMac.
All you need is just to add very simple code into your CSS:
/*Your current styles. It uses for Light mode as default. I didn't change it for my blog*/
body {
color: #fff;
background-color: #000;
}
/*All styles for Dark mode*/
@media (prefers-color-scheme: dark) {
/*Text color and background is a main styles*/
body {
color: #eaeaea;
background-color: #212121;
}
/*Feel free to change any others styles special for Dark Mode*/
pre {
color: #eaeaea;
background-color: #212121;
}
.blog-post {
background-color: #292a2f;
}
/*And etc.*/
}
Light Mode
Dark Mode
