Insight: Dark Mode in iOS 13

In the Worldwide Developers Conference 2019, Apple introduced Dark Mode in the latest version of iOS as iOS 13. Dark mode provides a darker theme to your iOS app.

Apple provides an option to enable dark mode instantly / during sunset / on a specific scheduled time. Now by default, all of Apple’s inbuilt apps support dark mode and also third-party apps have options to add dark mode.

The dark mode is based on the appearance preferences which alerts the system to make use of dark color palettes. Usually, the app shows the dark text on light backgrounds and white text on dark backgrounds.

Why do you need to implement a dark mode in your app?

• In dark mode, retina display consumes less power
• Increases users attention period to your app
• More responsive user interface style at any time
• Doesn’t affect circadian rhythms of the user which helps the user use their devices late at night

What happens if you are not adopting dark mode in your app?

• Users won’t feel comfortable to use your app during late night
• Number of downloads will be decreased
• Tough competition in the market

Steps to implement Dark Mode in iOS 13

Prerequisites:

• Xcode 11 & later
• iOS 13 compatible devices

If your Apps are created using the above-mentioned prerequisites, then your app can support both light and dark appearances.

Overriding Interface styles:

In Info.plist, you can specify UIUserInterfaceStyle to a constant value (light/dark) against system settings. By using the overrideUserInterfaceStyle property of the appropriate window/view/view controller can override the system settings.

Colors

1. Dynamic system colors:

In iOS 13, Apple introduced UIElement Color, a new set of standard colors to use with labels, texts, backgrounds, etc. In this, App provides two sets of colors for all UI components. One for day mode and one for dark mode.

Example: UIcolor.label

In day mode, it is in black and during the dark, it will be in white.

2. Dynamic Custom colors:

To integrate custom colors in your app, you can create a new color set from Assets. Then under the inspector panel, change the Appearance attribute that can support dark mode too and you can also set your colors.

After updating the colors in Assets, with the name of that color, you can use it anywhere in your app. And the system will handle the color change for you when the mode is updated.

Images

1. SF Symbols:

In the WWDC 2019, Apple introduced SF symbols which consist of a large collection of symbols(1500+) and are available for the developers.

Apple says that the system uses SF Symbols, in which automatically full-color images are optimized for both light and dark mode appearances. So use SF Symbols wherever possible.

2. Dynamic Custom images

Like colors, we can create dynamic images in Assets by setting appearance property to that image. Then you can add the appropriate image you need for the different modes.

After updating the images in Assets, you can use it anywhere in the app with that image name.

How do you enable Dark mode?

1. In Simulator:

Go to the Settings app on your simulator, navigate to the Developer screen, and turn on the Dark Appearance switch.

2. In Device:

Go to the Settings app on your device, navigate to the Display & Brightness screen, you can enable the Dark mode.

How to Enable Dark mode while debugging?

1. Storyboards:

While working with the views inside a Storyboard or Xibs, you can find an option to switch the interface preference between light and dark mode next to the device selection.

2. Simulator:

While working with Simulator, in Xcode 11 & later, there will be a new button in the debugging toolbar. This button has the option to switch interface mode.

Author: Geethanjali N
Stream: Mobile