Adopt dark theme to your app with iOS 13

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 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 hard coded 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 hard coded colors in coded views.

Select System Background Color instead of the original hard coded 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 catalogue

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

Tint attribute for this image asset is driven by a custom color in the asset library. Add multiple appearance 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 a dynamic color and UITraitCollection, which defines the UI environment of your application.

Example of UITraitCollection

userInterfaceIdiom .phone
userInterfaceStyle .dark
userInterfaceLevel .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 collectiontraitCollectionDidChange() may be used to apply necessary changes.

Follow on Medium: https://medium.com/@takuma.kakehi/adopt-dark-theme-to-your-app-with-ios-13-6f2275f86351

References

Implementing Dark Mode on iOS | WWDC 2019

IOS 13 Review: Join The Dark Side | The Verge

Apple Human Interface Guidelines — Dark Mode | Apple

11 apps that show off iOS 13’s new dark mode | cnet

White on black or black on white? The pros and cons of Dark Mode

Dark mode for iPhone arrives Sept. 19: How you’ll use Apple’s new iOS 13 feature | cnet

How To Use iPhone Dark Mode And Save Your Battery Life | TechInsider

Leave a comment

Your email address will not be published. Required fields are marked *