This website uses Google Analytics and Advertising cookies, used to generate statistical data on how visitors uses this website (with IP anonymization) and to deliver personalized ads based on user prior visits to this website or other websites. [read more]
These cookies are disabled by default until your Accept/Reject Consent.
The Consent can be changed 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;}
} 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 :)


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