WWDC 2019: Implementing Dark Mode on iOS
Find hereafter a detailed summary of the above named video which belongs to a taxonomy of some WWDC footages.
The original video is available on the official Apple website (session 214).
"Hear from the UIKit engineering team about the principles and concepts that anchor Dark Mode on iOS. Get introduced to the principles of enhancing your app with this new appearance using dynamic colors and images, and add an experience that people are sure to love."
The various contents of this video are indicated hereunder:
Most of the illustrations are parts of the Apple presentations and may be available at the Resources section inside the Overview sheet of each video.
Hereafter, the underlined elements lead directly to the playback of the WWDC video at the appropriate moment.
Design overview #
There's no need to hard code each color, just name it as it means to let UIKit work and automatically adapt the proper color according to the Dark Mode feature.
These semantic dynamic colors are definitely tailored at the app views hierarchy.
By the same token, these are also relevant for text in order to highlight the relative imoportance of each element.
The blur and vibrancy effects are also completely taken into account in dark and in light mode.
Unlike UIColor before iOS 13, a dynamic color may have different values that adapt perfectly to the Dark Mode feature.
Materials #
New vibrancy effect styles have been added in iOS 13 to provide a better focus.
A complete way to use both blur and vibrancy effects is also detailed in a pretty simple example.
Dynamic colors #
With the same semantic color, two different shades are specially designed for the Dark Mode feature and natively provided for the background.
The choice of the light or dark property of a color is based on the Trait Collection that represents the perfect mean to convert a dynamic color to its original value.
While using an asset catalog is an easy way to define a custom dynamic color, it's also possible to make it programmatically using a closure that will be called when the color conversion is needed.
New in iOS 13, UIKit handles a UITraitCollection property whose goal is to provide to certain methods a complete set of trait values describing the current environment.
Some of the new iOS 13 type property and instance methods used for colors and dealing with traits are detailed in a simple example.
When it comes down to finding out if the user interface style changes affects color values, the usage of another new iOS 13 UITraitCollection instance method comes in handy and turns out to be really appropriate to this situation.
Image variations #
Even if the UIImageView automatically manages the Dark Mode feature by using an asset catalog, it's also possible to resolve dynamic images programmatically.
Trait Collections #
New in iOS 13, traits are predicted during initialization and the traitCollectionDidChange method is triggered only when the initial traits are modified.
To have a better monitoring of this new behavior, iOS 13 improves the debug logging with launch argument in Xcode to be aware of the Trait Collections changes and to get all the details of these modifications.
To avoid the and be sure to deal with updated traits, some layout dedicated methods are reminded as the best tools to be worked with.
Any use cases may bring about different modes inside apps: some views would be in light mode while others might be in dark mode for instance.
New API have been introduced in iOS 13 to reach this goal by overriding the user interface style property on view controllers or directly on views.
There are already some API to change the traits directly but it's crucial to remember that only the intended traits should be modified.
API updates #
The Dark Mode feature easily handles the new status bar appearance declined in the same way for the UIScrollView's indicator style.
New activity indicators are introduced in iOS 13 and they're now just based on their size.
The text written in some classes has a label based color that automatically adapts to the Dark Mode feature.
However, the attributed strings must have a defined foregroundColor key attribute otherwise the text color will be always black irrespective of the mode.
Demos #
Find hereafter the main outlines of the demos that highlight the best practice to implement the Dark Mode feature.