As a senior iOS app developer, it is my responsibility to analyse an app UI / UX design from a developer standpoint and provide feedback to the designers. One of the common problems that my team encounter is the communication gap between designers and developers, because of that, designers sometimes might create UI / UX design that is impossible or extremely difficult to implement by the technical team.
With the introduction of dark mode in iOS 13, Apple has redefined the meaning of colors and UI styling in iOS, which further widen the communication gap between designers and developers. This has motivated me to create this article that from a technical perspective, explain what a designer need to know regarding adopting iOS dark mode in order to smoothen the communication between both parties.
Without further ado, let’s dive into all these changes one by one. 💡
Semantic Colors
In order to standardise the look and feel of iOS app in both light and dark mode, Apple has introduced semantic colors for some of the commonly used iOS UI elements.
Semantic colors do not have absolute RGB value, they are colors that will automatically adapt to the iOS interface style (light mode / dark mode). According to Apple documentation, developers or designers should use semantic colors whenever it is possible so that their app will be future-proof with any UI changes made by Apple.
For content background colors, there are 3 levels of standard content background colors and 3 levels of grouped content background colors.
Apple also introduced semantic colors to handle text color and overlay color in dark mode. Do note that ‘Label Colors’ in image below are not referring to the background color of the label, believe or not, they are actually referring to the text color. 😅
To read more about how or when to use semantic colors, you can refer to the Apple documentation.
System Colors
Aside from the semantic colors mentioned above, Apple also predefined 9 system colors. All these system colors are dynamic, meaning they will automatically adapt to the selected interface style just like semantic colors.
Following image showcase all 9 system colors together with their color code in both light and dark mode.
Blur and Vibrancy Effect
Prior to iOS 13, there is only 1 type of blur and vibrancy effect. In iOS 13, Apple introduced 4 types of blur effects and 8 types of vibrancy effects. As you might have guessed, all these visual effects will automatically adapt to iOS interface style.
The blur effects that available are: thick, regular, thin and ultrathin.
(source: developer.apple.com)
Vibrancy effects are usually applied to content within a blur effect to make it look more vivid while blending perfectly into the blurred background.
Apple introduced 4 types of vibrancy effects for text (Labels), 3 types of vibrancy effect for overlay (Fills) and 1 specific vibrancy effect for separator.
(source: developer.apple.com)
SF Symbols
SF Symbols are a collection of over 1500 symbols provided by Apple for designers and developers to use within their apps. As mentioned in iOS Human Interface Guidelines, SF Symbols automatically look great in Dark Mode and they are optimised for both light and dark appearances. Therefore, Apple highly recommend everyone to use SF Symbols whenever it is possible.
SF symbols are highly customisable, there are 3 sizes and 9 weight levels for you to choose from.
(source: developer.apple.com)
Furthermore, you can also change the SF Symbols tint color base on your app’s theme.
Apple has created a SF Symbols App for macOS to help developers and designers in searching and browsing all the SF Symbols that currently available. You can download it here.
Some might wonder what if you cannot find the SF Symbols that suits your needs? Fear not, you can use the SF Symbols App to export the symbol that is similar to the design that you want and customise the symbol using Illustrator or Sketch.
Dedicated Image and Color for Dark Mode
In conjunction with the release of iOS 13, Apple also released Xcode 11. By using the asset catalog in Xcode 11, developers can now create custom image and color group that specify what color and image to be shown in light and dark appearance.
Here’s the result from above asset catalog.
Wrapping Up
If you are a designer, I hope this article helps you understand how dark mode adoption works in iOS from a technical perspective. If you are a developer, feel free to share this to your fellow designers. You can also get the sample project here. When both designers and developers thinking on the same page, communication gap will no longer be a problem.
If you would like to learn more about the principle of dark mode, here’s a great article you shouldn’t miss — In the Spotlight: the Principles of Dark UI Design.
Thanks for spending your precious time reading this article. If you find this article useful, please do not hesitate to share it. Leave me a comment if you have any questions or thoughts. 🙂
👋🏻 Hey!
While you’re still here, why not check out some of my favorite Mac tools on Setapp? They will definitely help improve your day-to-day productivity. Additionally, doing so will also help support my work.
- ✨ Bartender: Superpower your menu bar and take full control over your menu bar items.
- ✨ CleanShot X: The best screen capture app I’ve ever used.
- ✨ PixelSnap: Measure on-screen elements with ease and precision.
- ✨ iStat Menus: Track CPU, GPU, sensors, and more, all in one convenient tool.
