Dark Mode Your Website

November 12, 2018

With MacOS Mojave, Apple introduced a system wide dark theme. While it is a nice feature, it has some drawbacks. One of the biggest negatives is that you can be blinded by an unexpected (and common) bright website in Safari. There really isn’t an easy way for Safari/Apple to completely remedy this on their end, but they did recently introduce/propose a way for website owners to take matters into their own hands. Currently this solution only works in Safari Technology Preview (free to download), but it should be coming to Safari soon. Hopefully other browsers will adopt it as well.

By using a simple media query in your CSS, you can create a style for your site that only shows when the system is in Dark Mode:

@media (prefers-color-scheme: dark) {style: here;}

Change your background color to something like #323232 and adjust your fonts and other styles accordingly. I didn’t do anything over-the-top with my site, but here’s a quick side-by-side.

Dark mode and light mode side by side