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
Nov 15 · 5 min read
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
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

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

iOS UI elements semantic colors in light mode and dark mode with color code
iOS UI elements semantic colors in light mode and dark mode with color code
Semantic colors of others UI elements in light mode and dark mode

To read more about how or when to use semantic colors, you can refer to the Apple documentation.


System Colors

The following image showcases all 9 system colors together with their color code in both light and dark mode.

iOS system colors in light mode and dark mode with color code
iOS system colors in light mode and dark mode with color code
System colors in light mode and dark mode

Blur and Vibrancy Effect

The blur effects that available are: thick, regular, thin and ultrathin.

4 types of iOS blur effects in light mode and dark mode
4 types of iOS blur effects in light mode and dark mode
4 types of blur effects in light mode and dark mode
(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 the separator.

iOS vibrancy effects in light mode and dark mode
iOS vibrancy effects in light mode and dark mode
Vibrancy effects in light mode and dark mode
(source: developer.apple.com)

SF Symbols

SF symbols are highly customizable, there are 3 sizes and 9 weight levels for you to choose from.

SF Symbols sizes and weight levels
SF Symbols sizes and weight levels
SF Symbols sizes and weight levels
(source: developer.apple.com)

Furthermore, you can also change the SF Symbols tint color base on your app’s theme.

SF Symbols with different tint color
SF Symbols with different tint color
SF Symbols with different tint color

Apple has created an 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.

SF Symbols App
SF Symbols App
SF Symbols App

Some might wonder what if you cannot find the SF Symbols that suit 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 customize the symbol using Illustrator or Sketch.


Dedicated Image and Color for Dark Mode

Setting image and color using asset catalog in Xcode
Setting image and color using asset catalog in Xcode
Setting image and color using asset catalog in Xcode

Here’s the result from the above asset catalog.

Showing dedicated image and color in iOS light mode and dark mode
Showing dedicated image and color in iOS light mode and dark mode
Showing dedicated image and color in light mode and dark mode

Wrapping Up


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


Originally published at https://swiftsenpai.com on November 15, 2019.

The Startup

Medium's largest active publication, followed by +536K people. Follow to join our community.

Lee Kah Seng

Written by

https://swiftsenpai.com | iOS developer since 2011 | Swift Lover | Music Addict | Anime Fan | Part-time Backpacker

The Startup

Medium's largest active publication, followed by +536K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade