The dark mode is a systemwide appearance setting that uses light-on-dark color schemes to provide a comfortable view for low-light environments. Since iOS 13, Apple has introduced Dark Mode to its devices running on iOS and iPadOS. It has been wide-used by users and they all expect apps to respect their preferences.
In this article, let’s find out how Apple has provided tools for developers to develop dark mode easily. Here are some of the topics we will cover:
Color is the most important thing in dark mode. When entering the dark mode, every component such as screens, views, menus, and controls will change its color to ensure content stands out on a darker background.
At a minimum, Apple requires the contrast ratio between colors is no lower than 4.5:1, which can trouble us in choosing the right colors. For those who find it difficult when working with colors and choosing compatible ones for the app, Apple also provides color sets that read and adapt better in both Dark and Light modes based on the UI purposes and layouts.
Here is the system-prefixed palette of colors that Apple provides. These colors provide suitable and legible shades on both light and dark backgrounds.
To load a color value from an asset catalog, you load it by name:
Semantic colors are colors based on the UI component’s purpose, such as for headings, subtitles, and links. Their roles in the system decide the corresponding semantic colors, for example:
Background colors are divided into 2 sets: system and group. The UI determines the color set to use, for instance, if the app uses grouped table view, you should use group background colors.
Each color set contains 4 variants: primary, secondary, tertiary, and quaternary. Based on the UI, the hierarchy of colors is defined below:
If the application is not limited by design, you can create the Color item in the Asset file. After setting Appearances, you now have extra options to set colors for modes.
The above image shows that colors are fixed on Dark and Light modes. In some cases, you might need to update the colors at runtime, that is when you need UITraitCollection.
Apple provides us the ability to change colors at runtime using UITraitCollection. UITraitCollection is a property in the UITraitEnvironment protocol which is implemented in UIWindow, UIViewController, and UIView.
Here is the definition:
You can access views and layouts to update colors based on the app logic and appearance, handled under the hood by traitCollection. Here is how to use traitCollection:
Now that we have covered quite some parts about colors, how about switching dynamic images between Dark and Light modes?
Just like adding variation to a color, you simply click Appearances and choose Any, Dark. A new empty slot will appear, and now we can drag the image we want to show in it.
In iOS 13, Apple provides a huge collection of consistent and highly configurable symbols - SF Symbols. These symbols scale well on appearance, size, and weight. And best of all, we can use them in the app for free.
As SFSymbols already support Dark Mode, you can set tint colors with dynamic colors and renderMode by default, using the code below:
You can check out this article to see how to create custom symbol images for the application.
In XCode, Apple provides a button to switch dark and light appearances on the storyboard when developing UI designs.
When you run the app via Xcode, a set of debugging buttons will appear at the bottom. Once clicking the Environment Overrides button, a pop-up appears. At the top, there is an Interface Style toggle.
You can use Command + Shift + A as shortcuts to switch modes instead of the Environment Overrides.
Dark Mode is more popular than ever, and almost every application nowadays supports it. However, if you do not want to apply this feature, here are some ways to opt-out of Dark Mode:
In file Info.plist, add a new key value:
In older iOS versions, if you add a key-value in the format Property List, the key name can be User Interface Style, but it has been changed into Appearance in the newest version.
After you set this property, the application will just either adopts Light or Dark mode when running.
Another way to switch off the Dark Mode is on the SceneDelegate property window.
If you opt-out on both Info.plist and UIWindow, the code on UIWindow overrides config on file Info.plist.
In UIViewController, you can opt-out of Dark Mode by inserting these codes in viewDidLoad().
This line overrides the style for this specific view controller and all the above config in Info. plist or UIWindow.
And that is all we would like to share about Dark Mode in iOS. If you are keen on discovering more coding or tutorial articles, you can check them out here.