This website uses cookies:
• from Cloudflare to identify trusted web traffic and protect this website. [read more]
• from Google Analytics to generate statistical data on how visitors uses this website. [read more]
• from Google AdSense (third party vendors, including Google) to deliver ads based on user prior visits to this website or other websites.
Do you agree that your data to be used to deliver you personalized website ads? You can change your mind at any time by accesing the ePrivacy button located at the bottom of every page. Enjoy your visit!

Website dark theme for macOS Dark Mode

macOS Mojave is using a well integrated and quite used Dark Mode interface. Of course, a Light Mode interface is also available, but here we will talk about the Dark one :)
A lot of macOS users prefer the Dark Mode and major software developers will add, or already have, dark mode support for their software. Your website ... guess what, is just another piece of software that macOS users are using it.

So why not enable a dark mode theme, automatic enabled, for your website? It's quite easy in fact.
In order to add and enable an automatic dark theme for macOS Mojave visitors, all we need are just few lines of css code.
As an example, below is the css code that sets and enable dark mode for this blog.

@media (prefers-color-scheme: dark) {
 html, body, #footer, .post, button {background-color: #261f1cc9;}
 .summary, .post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a,
 .post h2 a:visited, .post h2 strong, #menu li a, .content-wrapper,
 a.site_name, button, .post-body {color: #ececec;}
 #menu, #credit, #footer, .info {background-color: #333;}
}

b247.eu.org seen in Light / Dark mode, depending on the macOS settings

For now, this css media query @media (prefers-color-scheme: dark) is recognized and used by Safari and Firefox, no Chrome support for the moment (at the article date). Other OSs are also providing dark mode interfaces (Windows 10 and Pop!_OS have a Dark Mode) but for now, the browsers used in this OSs does not respond to the website automatic dark theme, but if this will be enabled in the future, the automatic dark theme of this blog will hit :)

label_outline

Share this post on your favorite networks.
© Copyright 2017 b247.eu.org | Just another information technology blog - All Rights Reserved