What a Designer Needs to Know About iOS Dark Mode When Working with a Developer

To reduce communication gap between both parties

Lee Kah Seng
The Startup
Published in
5 min readNov 15, 2019

--

iOS system colors and content background colors in light mode and dark mode
iOS system colors and content background colors in light mode and dark mode

As a senior iOS app developer, it is my responsibility to analyze 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 needs to know regarding adopting an 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 standardize the look and feel of the 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.

iOS content background colors in light mode and dark mode with color code
Content background colors in light mode and dark mode

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. 😅

--

--

Lee Kah Seng
The Startup

Support me by becoming a Medium member: https://leekahseng.medium.com/membership ⦿ 🇲🇾 Creator of https://swiftsenpai.com ⦿ iOS developer since 2011