Overview
After apple relieved the iOS Dark Mode theme, many were happy. It was one of the features we were waiting for since macOS Mojave’s dark mode. The first thing we were checking was our projects that we have worked on. How to support dark mode in it, how it would look etc.
It is very simple and easy to change. As in this blog, we’ll see how to use the system’s color and custom color as well for the dark mode. We’ll also see how to set images & icons for light & dark mode.
Minimum Requirement:
- Xcode 11 (beta or above)
- iOS 13 (beta or above)
Without wasting time let’s jump directly into the 1st topic: Set system color for dark mode.
This is my design for the light mode:
System Color
Apple has provided some good range of adaptable color, we can use and it automatically sets the color for the dark mode. We just want to set those adaptable color, and it will adapt its color for the dark & light mode. It’s that simple.
Let’s see how.
First, we will change our color for our Title label and background. By just selecting the system’s adaptable colors. E.g. Changing the system’s blue to systemBlue. I have selected systemBackgroundColour for my main view.
We can also use these colors programmatically too.
lblTitle.color = UIColor.systemGray
Let’s see now, how it looks in the iOS device dark mode.
Custom Color
For custom colors, we can add it to the asset file. In asset_file.asset < right-click into it > New color set. You will see the color in the list. Now select the color and in the attribute inspector, go to the Appearance and select Any, Dark. You will see 2 colors on the board. Change both the color according to your requirement for light and dark mode and give a proper name.
You can use this custom color through the storyboard and programmatically as well. In the storyboard, you can see it in the color list. And programmatically, you can access like this.
segmentControl.backgroundColor = UIColor(named: "segmentBg")
As we can see the segment controller in design looks thrown off a bit I’m going to create a custom color for it for both dark and light mode and so for my subtitle label to give it a little darker color.
Images & icons
For images & icons, steps are similar to a custom color. Select the image, in the Attribute inspector, go to the Appearance and select Any, Dark. You will see the empty box to upload images for the dark mode.
I’m going to change the sun image, if its an icon or a template image you can simply change the tint of the image as well, For example. The images in the segment controller are template image and their tint is handled by the system. here I will add a new image for the dark mode.
Other methods & property
We can use many ways to detect the dark mode and change the property in the app or on the individual screen as well.
1. Notification:
It is one of the ways to detect the change in the dark mode.
NotificationCenter.default.addObserver(self, selector: #selector(darkModeEnabled(_:)), name: .darkModeEnabled, object: nil) NotificationCenter.default.addObserver(self, selector: #selector(darkModeDisabled(_:)), name: .darkModeDisabled, object: nil)
2. TraitCollection property:
The dark mode is the party of the Trait Collection, thus the changes in the trait regarding appearance/interface style will be detected in the Trait collection method.
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
let userInterfaceStyle = traitCollection.userInterfaceStyle
//here you can take the necessary steps that you have to do when the appearance changes
}However, the trait collection consists of other traits and the method will get called in other like the device orientation change. Thus to detect the appearance change you can use the code below:
let hasUserInterfaceStyleChanged = previousTraitCollection.hasDifferentColorAppearance(comparedTo:traitCollection)
Not ready for Dark mode?
If you are just not yet ready to adopt the dark mode you can simply override the user’s choice by using
overrideUserInterfaceStyle = .dark
or
overrideUserInterfaceStyle = .light
You can do this for one screen or the whole application.
Another way to keep a default interface for your app ignoring whatever user has set you can simply add a key pair in your info.plist
Open your info.plist as Source Code
Add the key-value pair just above
<key>UIUserInterfaceStyle</key> <string>Light</string>
Conclusion
Ready or not Dark mode is here and soon people will be addicted to it and will want them in most apps they use. Better to do it now then to go back and do it again!!
You may also like
How do you Integrate AI and Personalization Features into Your ecommerce App?
In the ever-evolving digital landscape with the changing pre...
Redefining Healthcare Experiences: Gamification in Healthcare: Benefits, Trends & Examples
Gamification in healthcare apps reveals a new possibility in...
Gamification in Education: The Winning Trio of AR, VR & AI
Relying on conventional techniques for modern-day challenges...
