So Dark Mode isn’t simple at all. It may even prove impossible to darken everything on your Mac’s display. Far from the App Store’s bold claim of “Apps that look great in Dark Mode”, are we going to be stuck in Checkerboard Mode, screwing our eyes up with the Flashlight Effect?
Before I look at the biggest problem, websites and your browser, let me make one point clear. In the App Store’s list of recommendations for apps which ‘look great in Dark Mode’ are Numbers and Pages. Unless there’s a secret control somewhere, neither of those apps actually darkens your working view within its window, which remains dazzling white.
If you want to see Dark Mode document editing done right, look at an app like Liquid | Author instead.
If you don’t use Dark Mode, this might all seem academic or, as some would claim, eye candy. But there’s a great deal of investment on the part of Apple and third-party developers to get macOS and a great many apps – like Liquid | Author – getting it right. Splash a large extent of black-on-white in the middle of Dark Mode, and it ruins the whole effect. It’s like someone shining a flashlight in your face in the middle of the night, hence the Flashlight Effect.
While Numbers 5.3 and Pages 7.3 might finally catch up with this, the biggest problems are still centred on websites and browsers, particularly Safari.
In the beginning, with plain old HTML, it wouldn’t have been difficult to add a pleasant Dark Mode to a browser like Safari. As the Dictionary app demonstrates, rendering many webpages in a local Dark Mode works quite well, provided that you don’t try it with just any website.
Now there is a large website design industry, and no self-respecting blog even can get by without finely crafted stylesheets and more, much of the content of a great many webpages would simply disappear if Safari were to make its view darker. A simple trick like the stylesheet media query which you can use to fix custom dictionaries isn’t going to get Safari anywhere.
Help is, though, at hand: as Craig Hockenberry recently reported, a new and different media query in CSS lets web designers provide alternative colour schemes for Light and Dark mode. These use the
prefers-color-scheme media query, and are documented here. Safari Technology Preview release 68 and later now supports this in Dark Mode CSS Support, as an experimental feature.
(As an aside, you may notice that those new media queries include
prefers-reduced-motion. I know one fine Mac and iOS writer who will be overjoyed that this is finally making it into the standard, but fear that its support will take even longer than that for Dark Mode.)
There are some websites which have jumped the gun, and already offer Dark Mode as an option: one of the best examples is MacStories. When you have opened that page, click on the black-and-white circle to the right of SECTIONS in the menu bar, and the world will be at ease again.
Maybe once Safari adopts support for the new media query in CSS, we’ll start to see more Mac-oriented websites supporting Dark Mode in their styles. When achieved using the new media query, the user shouldn’t have to do anything, apart perhaps from changing their preference to load pages in Dark Mode.
If other browsers follow suit, there may be sufficient market force to encourage web designers to start implementing Dark Mode support more widely. Then after a few years, most of the better-designed and -maintained sites should spare us the Flashlight Effect.
So Dark Mode isn’t simple at all when what was intended to be portable, platform-agnostic and largely appearance-insensitive has been made almost as rigid and restrictive as Display PostScript. It makes you wonder how people with serious visual issues can ever cope.