Apple today released macOS Mojave 10.14.4. But I’m interested on this part:

Safari:
— Adds Dark Mode support for websites that support custom color schemes

It’s really 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 user set Dark Mode on his Macbook or iMac.

All what you need is just 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

Light Mode

Dark Mode

Dark Mode
Categories: Web development