Adopt dark theme to your app with iOS 13

4 min readNov 12, 2019

Thanks to undraw.co for a great illustration

In WWDC 19, Apple unveiled iOS 13 featuring the native dark mode that app developers can easily introduce to their app. Not only can users change their themes from settings, they can also change them from the control center, set them to change automatically at certain times or sync with their sunrise and sunset times. Apps like Twitter, Reddit, Apple Books, Slack, Feedly, Facebook messenger, Kindle, and other apps, especially the ones that require a lot of reading, have adopted dark mode nicely.

Dark mode saves battery on your OLED screen devices. Although many people associate dark mode with being helpful to our eyes, there is no conclusive scientific proof for that, especially regarding its long-term effects. For more information, please take a look at this entry: White on black or black on white? The pros and cons of Dark Mode

iOS 13 public beta: dark mode, Apple Maps, Reminders | The Verge

One of the keynotes in the WWDC 19, Implementing Dark Mode on iOS, explained how apps should be set up to take advantage of this new OS feature. This entry picks the main notes from the keynote.

Semantic colors

Traditional iOS colors were hardcoded with specific RGB values. With the iOS 13 update, Apple introduced semantic colors- namings for colors that signify what each is used for. As shown in the diagram below, Apple’s Human Interface guideline provides system default colors, which have different RGB values for each mode and with accessibility features. These names correspond to those for iOS UI elements.

Instead of using system colors, UI colors can be customized. Instead of each UI color having one specific color value, different values can be added for each mode to one UI color. UIKit will use the correct value depending on the settings of the app.

UI color is dynamic instead of a static single color value | WWDC 19

Apply a system colors

In order to take advantage of dynamic colors that Apple put together, you simply have to select System colors, System Background Color for example, from hardcoded colors. Similarly, system colors can replace hardcoded colors in coded views.

Select System Background Color instead of the original hardcoded color | WWDC 19

Interestingly, even the same system color in the same mode could result in different color values. For example, the base level, which is a fundamental layer that covers the whole screen, has a darker System Background Color compared to the elevated level, which is an element that goes over the base level.

Create a dynamic UIcolor in the asset catalog

For instance, multiple appearances for each mode can be added to color in the asset catalog from the example below by selecting Any, Dark option for its Appearance attribute.

The tint attribute for this image asset is driven by a custom color in the asset library. Add multiple appearances to have a different one | WWDC 19

Create a dynamic UIcolor in code

Colors you see, black for System Background Color in dark mode, for example, are the results of the combination of dynamic color and UITraitCollection, which defines the UI environment of your application.

Example of UITraitCollection

userInterfaceIdiom .phoneuserInterfaceStyle .darkuserInterfaceLevel .base

Therefore, in order to access the actual color value in code, you use resolvedColor(with: ) method.

For standard drawing methods, the detecting trait collection happens before they run. Similarly, UIKit automatically calls the draw method again to draw the view with new sets of colors when the mode changes. However, if any attributes need to be adjusted depending on the trait collection, traitCollectionDidChange() may be used to apply necessary changes.

Original post: http://www.ta-kuma.com/wp-admin/post.php?post=369&action=edit

Adopt dark theme to your app with iOS 13

Semantic colors

Apply a system colors

Create a dynamic UIcolor in the asset catalog

Create a dynamic UIcolor in code

References

Written by Takuma Kakehi