iOS 13 Dark Mode Support Practice
As my iOS app recently supported Dark Mode, I wrapped up the implementation flow and some tips.
(Here is the original Japanese article published by @hirothings.)
Notes: This article is for those who already know the summary or have the basic knowledge regarding Dark Mode. If you are not familiar with it yet, you could refer to the links below this article.
Utilize Color Set
The basic refactoring was a replacement of static color settings embedded by hard-coding with dynamic color ones by using .systemBackGroundColor.
I used to code the color settings, but Dark Mode, the iOS 13 new feature, made me decide to use Color Set which had already been introduced on iOS 11.
The advantages of using Color Set are as follows:
- available on Storyboard, Xib, and coding as well as UIColor
- visually definable both light and dark colors
UI Element Colors (such as .systemBackgroundColor), which are provided from iOS 13 SDK, are also available on the Attribute Inspector.
I recommend you to create a new Asset Catalog for colors separately from images because it’s easy to manage them on your Xcode project.
It’s even better to use SwiftGen or something like that with the assets, as type-safe constants help you refer to them from your code easily.
I got rid of hard-coded custom UIColor files after moving all color definitions to Color Assets because I didn’t have to manage both of them in the same Xcode project anymore.
You’re better off starting from the migration to Color Assets if you’re going to make your apps compatible with Dark Mode, and you don’t use it yet as
you’ll be on the right track with your next task.
Use UI Element Colors As Much As possible
UI Element Colors enable views to:
- change the depth of colors automagically by whether it’s modal or not.
- provide alternative colors for iOS12 or lower devices.
(ex. white instead of.systemBackGroundColor)
The followings are screenshots of Calendar and Reminder apps on Dark Mode.
You can see that modal views are a bit brighter than normal ones.
UIKit, which provides .systemBackGroundColor and so on, can recognize the hierarchy and process the colors automagically, so you don’t have to write any codes for it. It means it’s possible to distinguish whether the user interface level is base or elevated by the depth of the colors. (.secondarySystemBackground also changes depending on the color of .systemBackGroundColor.)
As this auto color adjustment function is very beneficial, I believe you’re better off using .systemBackgroundColor and so on as much as possible. I mean, you should make use of the functions which are already provided for making your apps compatible with Dark Mode.
If you’re a well-experienced developer and have already developed some apps on business, the apps probably have customized background colors, therefore you’ll have to communicate with designers of your team, and share your knowledge regarding the tools provided by Apple with them.
In my case, I think it was a good opportunity to remove various background colors customized by self-coding on some screens, which were mainly dominated by UITableView, and consolidated all the colors into .systemBackgroundColor.
Preview Colors
It’s so easy to check the colors through Storyboard or Xib.
If you lay out interfaces using Storyboard or Xib, you can do a brief check of the dark or light colors without building your app. (see the bottom menus of IB.)
While you’re debugging, you can change the interface style through Environment Overrides of the debug menu.
On a real device, you can switch the appearance quickly by adding the button in the Control Center. (Settings -> Control Center -> Customize Controls)
Subtle Color Adjustments
Contrast Checker is worth a shot because color distinguishability is numerically checkable.
I confirmed the primary color and the disabled color of my app and made them more vivid.
It took a half-day to complete all the tasks. I reckon I was able to finish comparatively earlier than expected, as the number of screens is 20 or so and are designed by myself.
Instead, it took a long time to define semantic colors that were appropriate to my app, but it was a silver lining to be able to review if my app had the proper semantic colors.
As Xcode already has tools like Color Set, UI Element Colors, and so on to define semantic colors and adjust them to Dark Mode, I wonder whether it’s necessary to design all the screens for just adjusting the colors or not. I suppose it’s better off meeting with designers, using IB, and showing the screens on Xcode directly if you already have some design comps for the main screens.
One More Thing…
Don’t forget to make your app’s launch image compatible with Dark Mode. It’s a bit dazzling for only a moment when it’s opened.
I realized I had forgotten to do it after releasing it by the way.
(Seems like Slack app as well.)
Just change the background color of the view to .systemBackGroundColor. It’s a piece of cake.
Done!!
Here is my app compatible with Dark Mode this time.
Hoping you could try it.
This is a ToDo app in which you can share your to-do lists with your family and better half, just by inviting them through chat app, etc.
