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
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.
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.
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.
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.
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
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.