Thursday, July 5, 2018

Dark Side of the Mac: Appearance & Materials

Kuba Suder:

One of the most exciting announcements at this WWDC was the introduction of a long-awaited “dark mode” in macOS 10.14 Mojave, which lets you use a whole desktop with all the apps on it in a dark theme, instead of just the dock and the menu bar as before.

While I’m not nearly as excited about it from the user’s perspective as some others are 🙂 – I’m totally a “light side” Mac user, I’ve always used a light theme in TextMate, light theme in Xcode, white background in iTerm, and I sometimes have to use reader mode on websites with a dark background – I’m actually very curious about it as a developer. The reason is that it seems to require a lot of changes across apps to adapt them to the new appearance, or at least a lot of checking and testing, but it does so in a way that feels like “making things right” – not so much introducing complexity just for this reason, but rather enforcing some order and good practices that were earlier easy to forget about.

Supporting Dark Mode is proving to be an unexpectedly large amount of work, but it’s also brought improvements and greater consistency to the frameworks that should be good long-term. I’m finding places where I can now use the proper API and get the right result (visual consistency with Apple’s apps), rather than having to find hacks to match what everyone expects to see.

Update (2018-07-11): Kuba Suder:

This is the second part of that article – now that we have the theory behind us, let’s see how you can make your own app work with dark mode.

Update (2018-07-16): Ricky Mondello:

We’re considering adding a web-exposed media query, but it requires some more thought. Standardization is a thing, and API is forever. :)

See also: Craig Hockenberry.

Will Cosgrove:

Having worked with macOS Dark Mode for a while now it suffers the same problems as vibrant views before it. Blending random colors from the desktop into your user interface doesn’t look good. Designers can’t design for it and the end result looks messy and inconsistent.

Patrick Metcalfe:

I think it looks great when it’s used consistently. If you have a sidebar then using it looks great bc I’m used to that from other apps. Using it in other places suffers from the points you have

Update (2018-07-17): See also: the updated Human Interface Guidelines.

Update (2018-07-18): Brent Simmons:

If you’re developing a Mac app, and thinking of making it dark-mode-only, please consider that light mode is, for some people, an accessibility issue.

Though dark mode is beautiful, not everybody can use it.

Emily St:

This is absolutely true. For example, some astigmatisms make dark mode difficult to read unless the text size and weight can be adjusted. (This can break layouts, if it’s possible at all.)

Kirk McElhearn:

I have been ranting about this for years. White text on a dark background is hard to read for people with astigmatism, which is about 30% of users. Dark mode only is a big FU to nearly a third of your customers. I’ve never been able to use Spotify for this reason.

Jason Snell:

Apple took Logic dark with version X, apparently for aesthetic reasons. I hope the existence of dark mode will encourage some of these developers to build a light mode for their apps too.

Update (2018-07-19): Nadine Chahine:

Agreed! My research (along Monotype and MIT AgeLab) over several studies showed that word recognition speed drops in dark mode and especially so for older readers.

Update (2018-07-24): Brent Simmons:

Do semantic WebKit colors — -apple-system-text-background, for instance — not take Dark Mode into account? (Or is it just me and I’m doing something wrong?)

Jeff Nadeau:

My impression is that, in the absence of private API that shouldn’t be touched, WebKit resolves everything against the light appearance by default, the same way it does in Safari.

5 Comments RSS · Twitter

I fully agree. The WWDC sessions on Dark Mode are a good way to see the breadth of changes associated with Dark Mode, that go beyond Dark Mode.

Introducing Dark Mode: https://developer.apple.com/videos/play/wwdc2018/210
Advanced Dark Mode: https://developer.apple.com/videos/play/wwdc2018/218

It's not a lot of work for 3rd party developers but the issue is that there are so many bugs (big and little) in the current betas that you can't be sure at this time that you will enable Dark Mode support in the GM for your app.

@someone Indeed. Right now, I’m investigating a bug where it seems like simply opting into Dark Mode messes up my app in Light Mode.

I've made many apps and tools with REALbasic / Xojo, and sadly, ALL of them suffer from some visual artifacts in 10.14b2 now, probably due to the changes Apple made for Dark mode. E.g, Listbox headers appear entirely black, even in "light mode".

Now we all have to work for Xojo Inc to find and fix these issues in their frameworks, so we can rebuild our apps, but it'll be a huge pain as APIs have changed or even been removed in Xojo's libs over time, which leads to more work.

Worst of it: Two of my apps are in the App Store - and we're not allowed to upload 32 bit apps any more, meaning that for me to fix this visual issue, I'll have to first convert my apps to 64 bit, which is even more work (especially for iClip that relies on some 32 bit APIs for which I can't find replacements in 64 bit so far).

[…] Previously: Dark Side of the Mac: Appearance & Materials. […]

Leave a Comment