Discover iOS Dark Mode Programming

Introduction

The dark mode is a systemwide appearance setting that uses light-on-dark color schemes to provide a comfortable view for low-light environments. Since iOS 13, Apple has introduced Dark Mode to its devices running on iOS and iPadOS. It has been wide-used by users and they all expect apps to respect their preferences.

In this article, let’s find out how Apple has provided tools for developers to develop dark mode easily. Here are some of the topics we will cover:

• Colors
• Assets
• SF Symbols
• UI testing
• Dark Mode opt-out

Colors

Color is the most important thing in dark mode. When entering the dark mode, every component such as screens, views, menus, and controls will change its color to ensure content stands out on a darker background.

At a minimum, Apple requires the contrast ratio between colors is no lower than 4.5:1, which can trouble us in choosing the right colors. For those who find it difficult when working with colors and choosing compatible ones for the app, Apple also provides color sets that read and adapt better in both Dark and Light modes based on the UI purposes and layouts.

1. System colors

Here is the system-prefixed palette of colors that Apple provides. These colors provide suitable and legible shades on both light and dark backgrounds.

To load a color value from an asset catalog, you load it by name:

2. Semantic colors

Semantic colors are colors based on the UI component’s purpose, such as for headings, subtitles, and links. Their roles in the system decide the corresponding semantic colors, for example:

• .label
• .separator
• .link
• .systemBackground
• .systemFill

3. Background colors

Background colors are divided into 2 sets: system and group. The UI determines the color set to use, for instance, if the app uses grouped table view, you should use group background colors.

Each color set contains 4 variants: primary, secondary, tertiary, and quaternary. Based on the UI, the hierarchy of colors is defined below:

• Primary for the overall view
• Secondary for grouping content or elements within the overall view
• Tertiary for grouping content or elements within secondary elements
• Quaternary for grouping content or elements within tertiary elements

Assets

1. Asset colors

If the application is not limited by design, you can create the Color item in the Asset file. After setting Appearances, you now have extra options to set colors for modes.

The above image shows that colors are fixed on Dark and Light modes. In some cases, you might need to update the colors at runtime, that is when you need UITraitCollection.

2. Dynamic colors

Apple provides us the ability to change colors at runtime using UITraitCollection. UITraitCollection is a property in the UITraitEnvironment protocol which is implemented in UIWindow, UIViewController, and UIView.

Here is the definition:

You can access views and layouts to update colors based on the app logic and appearance, handled under the hood by traitCollection. Here is how to use traitCollection:

3. Dynamic images

Now that we have covered quite some parts about colors, how about switching dynamic images between Dark and Light modes?

Just like adding variation to a color, you simply click Appearances and choose Any, Dark. A new empty slot will appear, and now we can drag the image we want to show in it.

SF Symbols

In iOS 13, Apple provides a huge collection of consistent and highly configurable symbols - SF Symbols. These symbols scale well on appearance, size, and weight. And best of all, we can use them in the app for free.

As SFSymbols already support Dark Mode, you can set tint colors with dynamic colors and renderMode by default, using the code below:

You can check out this article to see how to create custom symbol images for the application.

UI testing

In XCode, Apple provides a button to switch dark and light appearances on the storyboard when developing UI designs.

When you run the app via Xcode, a set of debugging buttons will appear at the bottom. Once clicking the Environment Overrides button, a pop-up appears. At the top, there is an Interface Style toggle.

You can use Command + Shift + A as shortcuts to switch modes instead of the Environment Overrides.

Dark Mode opt-out

Dark Mode is more popular than ever, and almost every application nowadays supports it. However, if you do not want to apply this feature, here are some ways to opt-out of Dark Mode:

1. Turn Dark Mode off for the whole app by using the UIUserInterfaceStyle key in Info.plist.
2. Set the interface style on the app’s UIWindow, which usually means the entire app.
3. Set the interface style for a specific UIView or UIViewController.

1. Turn off using Info.plist

In file Info.plist, add a new key value:

In older iOS versions, if you add a key-value in the format Property List, the key name can be User Interface Style, but it has been changed into Appearance in the newest version.

After you set this property, the application will just either adopts Light or Dark mode when running.

2. Turn off using UIWindow

Another way to switch off the Dark Mode is on the SceneDelegate property window.

If you opt-out on both Info.plist and UIWindow, the code on UIWindow overrides config on file Info.plist.

3. Opting out in UIViewController

In UIViewController, you can opt-out of Dark Mode by inserting these codes in viewDidLoad().

This line overrides the style for this specific view controller and all the above config in Info. plist or UIWindow.

Closure

And that is all we would like to share about Dark Mode in iOS. If you are keen on discovering more coding or tutorial articles, you can check them out here.