Dark Mode
Apple has used dark materials for years, from the U2 iPod to black MacBooks, its professional Mac apps and tvOS. Clever designers and users have been customizing their Macs for decades, with projects like Max Rudberg’s Obsidian menu bar that took this further and paved the way for Apple’s own version. Now, in macOS 10.14 Mojave, Apple is finally introducing Dark Mode, a dark version of the macOS UI that applies to the entire system.
A dark macOS UI aligns with the user customization theme that Apple has been talking about since the introduction of translucency and blurring in OS X 10.10 Yosemite. As an Xcode user, I’ve wished for a Dark Mode that was easier on the eyes in dark environments and that didn’t clash with a dark syntax theme.
As an app developer, you can start taking advantage of Dark Mode by compiling your existing code with Xcode 10 and the latest macOS SDK. Depending on how your UI is built, your app may not need any changes, or you might need to make thoughtful adjustments to colors and design assets. Let’s get started!
Once your app is running with Xcode 10, you can switch appearances in Xcode’s debug bar. This makes it easy to test how well your app adapts to each appearance without going into the General System Preferences pane.
Look for colors, images and materials that don’t look quite right. Maybe one of your app-specific colors needs to be less saturated in Dark Mode, or there’s a template image that needs to be adjusted with more fill. Here are some common considerations when implementing Dark Mode:
- Make sure you use the dynamic, semantic NSColors. NSColor is different from UIColor on iOS in that some of them, like NSColor.labelColor, actually resolve to different values at draw time depending on the current appearance. This is super useful for Dark Mode! Search your code for static colors like NSColor.black and see if there’s an appropriate semantic color like NSColor.labelColor instead. Accent colors like systemBlue may need to be updated as well, in order to support the new accent and highlight color user preferences. This will especially be the case if your app implements custom controls.
- Use new, more specific semantic materials like titlebar, sidebar and popover. In my own app I had a custom header view that overlaid a table view, which can now use NSVisualEffectView.Material.headerView.
- If you have app-specific colors or images that need to adapt to Dark Mode, you can now specify variants for light and dark appearances and the high contrast accessibility variants in your asset catalog. Template images can be useful too, but check to see if you need to adjust the glyphs for each appearance.
- If your app has an existing Dark Mode that you implemented yourself, it might be time to delete a bunch of code! 🎉
- Most apps should use the appearance set in the users System Preferences. For some apps, like media playback apps, it’s appropriate to only support the dark appearance.
Apple has put a lot of thought into how Dark Mode should look and feel. A large portion of WWDC 2018’s session 210 was presented by a member of the design team, and there’s a lot of details to talk about. Session 218, Advanced Dark Mode, goes further in-depth about what makes up Dark Mode and some of the API changes to look out for, such as when drawing NSImages programmatically.
Conclusion
In summary, users will expect support for Dark Mode and their chosen accent and highlight colors so that your app fits in with the other apps they use. It’s easy to get started with Dark Mode with no code changes, so start today and check out what your app looks like!
