Adopting iOS Dark Mode
Default and customized colors and images in iOS 13's dark mode
In short, in order to adopt dark mode in iOS, you need to prepare two sets of colors or images. One for day mode and one for night mode.
It seems like a lot of work, but it really depends. If your apps don’t have customized icons, colors or images for dark mode, it’ll be quite simple. Otherwise, it will require some work, but I will show you some approaches to help you.
Before we go into details, let’s see how dark mode works in iOS 13.
UI Element Colors (Semantic Color)
UI Element Color is a new set of standard color objects for use with labels, text, backgrounds, links, and more. It’s only available on iOS 13, tvOS 13 and later.
This means that Apple also prepared two sets of colors for all system UI components. The tricky part is that one color name is actually mapped to two colors — one for day mode, one for night mode. For example:
lable.textColor = .labelUIColor.label is actually the color black in day mode, and white in night mode. As long as you use the element color, the system will handle the color changes for you when your user toggles between day mode and night mode.
Adopting the UI With Default Colors
If some of the UI components in your project are using the default system color, you can simply change them to the new UI element color.
Programmatically
self.label.textColor = .label
self.view.backgroundColor = .systemBackgroundInterface Builder
How to Toggle Dark Mode in the Simulator?
When you open Xcode 11 beta or later, there is a new, small environment override icon, when you run your app in the simulator. Click it and then you can toggle dark mode in your simulator.
Adopting the UI With Customised Colors
Programmatically
In iOS 13, a new UIColor initializer was introduced:
init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)You can customize your own color, based on the userInterfaceStyle property from UITraitCollection:
You can simply create a new color set from Assets, and then under the inspector panel, change Appearance to dark mode, then you can set two colors.
After setting the color inAssets, you can use this name anywhere, and of course, the system will handle the color change for you when dark mode is toggled.
Adopting UI With Customised Images
Similar to color, images for dark mode can be set in Assets as well.
The good thing about setting colors or images in Assets is that it’s backward compatible. It means that you don’t need to say if #available(iOS13, *) in your code. The system will auto-use the day mode color or images for an app running iOS 12 and before.
