Part 3 — The Dark Mode
In this article, we will discuss Dark Mode in iOS. We’re going to try and understand how the Dark Mode works, and what are the best practices while making an app that supports both light and dark modes.
IECSE Crash Course: Development with Swift
This article is going to be the third article of the series IECSE Crash Course: Development with Swift. Through the course of 10 articles, we are going to make a small app which will display a set of users that we will fetch from the net. While making the app, we will cover some of the most important topics that every iOS developer must know. You can get the code till the previous article here.
With the release of iOS 13 and Xcode 11, Apple introduced the Dark Mode. The Dark Mode adds a darker theme to an iOS device while allowing us to do the same for the apps on that device.
In their device settings, users can select Dark Mode as their default interface style. As this choice is made for the entire system, it is normal for users to want all the apps to comply with the system preference of their choosing.
As a developer, you are responsible to develop an app suitable for light as well as dark modes. It might so happen that an app might not look as good in Light UI as it does in Dark UI, or vice-versa. So, it is recommended to test your app in both settings.
There are two requirements for your app to support Dark Mode :
- It has to be built and released with Xcode 11 or later.
- Only the devices running iOS 13.0 (or later) support Dark Mode.
After these are met, you need to switch to Dark Mode in your device settings. The UI for your app will automatically switch the appearance.
Now, let’s look into the features of how we can use and develop apps that look good in both, light and dark modes.
To enable dark mode while testing, you will have to first go to Settings. Under the Developer section, make sure that the Dark Appearance option is on. Once you do this, all your apps will automatically change their UI appearance.
For a user, an app which does not comply with system-wide preferences might be inconvenient. They might also think that the app is not working. Along with this, it is difficult on the eyes to switch modes for only one app.
How to manage the colors
The colors that work well in a light appearance may be hard to see in a dark appearance and vice versa. The light and dark interfaces use very different color palettes. Apple came up with a solution so that we don’t have to design separate interfaces for different system preferences.
With Xcode 11 and iOS 13, Apple introduced colors that adapt automatically to the underlying interface style. Instead of using fixed shade colors, it is advised to use system colors, these are the colors that adapt automatically to the system preferences. You can read about them here.
Apart from these system colors, with iOS 13, a range of 6 opaque gray colors were also introduced. These also adapt to the system preferences.
Semantic colors
When we talk about labels, textfields, and different components, it is obvious that the change of system preference will also affect their visibility. Hence, here, it is advised to use Semantic Colors that again change according to the appearance modes.
It is considered good practice to use these colors exactly for what they are intended. This helps in consistency to be maintained among all the apps on the user’s device. You can also refer to these guidelines for the use of semantic colors.
Adding Colors manually
Along with these system colours, as a developer, you might need to use some additional colours. iOS allows us to define colours manually for light and dark themes such that the respective shade is selected for the preferred theme. The same can be done if you want two different images to be used for different appearance modes.
Go to the “Assets.xcassets” folder in Xcode for your project.
Right click and select “New Color Set”. In “Appearances”, select “Any, Light and Dark”. This will allow you to set a color and define how this color would look in different UI modes. Now iOS will put either of these colors depending on the system preference. Also, the color in “Any Appearance” will be used when the device is running below iOS 13.
This works the same way even when you select “Any and Dark” in “Appearances”. The color in Any Appearance is selected for Light mode and devices below iOS 13. Using this method has its own advantages as it is backwards compatible, because it uses the color set in any appearance for devices running on older versions of iOS.
Forcing the app to use a selected UI
If we want our app to specifically run on light or dark mode irrespective of the system preferences, what we can do is go to info.plist and add a key “UIUserInterfaceStyle” and set it to “Light” or “Dark”.
Wrapping Up
Although this is an option, it is advised to build an app which can run on both Appearance modes. In the end, it is alright if our app prefers one of the appearance modes to the other. You can continue with the series in the next article where we cover Navigation bars and the Codable Protocol.
Congratulations 🎉! You have just completed the third tutorial!
All of the above-written code is available on Github. Watch this space for more interesting challenges, up next in this series!
Confused about something? Let us know in the responses below. 😄
