{"id":22039,"date":"2018-07-05T15:38:07","date_gmt":"2018-07-05T19:38:07","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=22039"},"modified":"2019-05-21T16:03:24","modified_gmt":"2019-05-21T20:03:24","slug":"dark-side-of-the-mac-appearance-materials","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2018\/07\/05\/dark-side-of-the-mac-appearance-materials\/","title":{"rendered":"Dark Side of the Mac: Appearance & Materials"},"content":{"rendered":"

Kuba Suder<\/a>:<\/p>\n

\n

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.<\/p>\n

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.<\/p>\n<\/blockquote>\n

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.<\/p>\n\n

Update (2018-07-11): Kuba Suder<\/a>:<\/p>\n

\n

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.<\/p>\n<\/blockquote>\n\n

Update (2018-07-16): Ricky Mondello<\/a>:<\/p>\n

\n

We’re considering adding a web-exposed media query, but it requires some more thought. Standardization is a thing, and API is forever. :)<\/p>\n<\/blockquote>\n\n

See also: Craig Hockenberry<\/a>.<\/p>\n\n

Will Cosgrove<\/a>:<\/p>\n

\n

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.<\/p>\n<\/blockquote>\n\n

Patrick Metcalfe<\/a>:<\/p>\n

\n

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<\/p>\n<\/blockquote>\n\n

Update (2018-07-17): See also: the updated Human Interface Guidelines<\/a>.<\/p>\n\n

Update (2018-07-18): Brent Simmons<\/a>:<\/p>\n

\n

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.<\/p>\n

Though dark mode is beautiful, not everybody can use it.<\/p>\n<\/blockquote>\n\n

Emily St<\/a>:<\/p>\n

\n

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.)<\/p>\n<\/blockquote>\n\n

Kirk McElhearn<\/a>:<\/p>\n

\n

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.<\/p>\n<\/blockquote>\n\n

Jason Snell<\/a>:<\/p>\n

\n

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.<\/p>\n<\/blockquote>\n\n

Update (2018-07-19): Nadine Chahine<\/a>:<\/p>\n

\n

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.<\/p>\n<\/blockquote>\n\n

Update (2018-07-24): Brent Simmons<\/a>:<\/p>\n

\n

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?)<\/p>\n<\/blockquote>\n

Jeff Nadeau<\/a>:<\/p>\n

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.<\/p><\/blockquote>","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2018-07-24T18:22:09Z","apple_news_api_id":"36300692-16c9-4d9a-aa5e-843bae793c0a","apple_news_api_modified_at":"2019-05-21T20:03:29Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAACw==","apple_news_api_share_url":"https:\/\/apple.news\/ANjAGkhbJTZqqXoQ7rnk8Cg","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[4],"tags":[930,69,1805,77,30,1609,71],"class_list":["post-22039","post","type-post","status-publish","format-standard","hentry","category-programming-category","tag-accessibility","tag-cocoa","tag-dark-mode","tag-design","tag-mac","tag-macos-10-14","tag-programming"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/22039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=22039"}],"version-history":[{"count":11,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/22039\/revisions"}],"predecessor-version":[{"id":22235,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/22039\/revisions\/22235"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=22039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=22039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=22039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}