How to Adopt iOS 13 Dark Mode in your iOS App
Apple has introduced the latest version of iOS known as iOS 13 on June 13 at a keynote event known as Worldwide Developers Conference 2019.
Apple has optimized iOS 12 to its core and then introduced a lot of new features for its users in the iOS 13.
Various different features released by apple has modified photo editing app, system-wide dark mode, enhanced sign in with Apple for third-party apps, look around a feature in the map, new memoji stickers, optimized Siri, audio sharing option enhanced for airpods and beats headphones, voice control accessibility, optimized download speeds, optimized Face ID, swipe keyboard, optimized CarPlay, etc.
Out of all the features, Apple has also introduced a system-wide dark mode which is very much important. It changes the entire look and feel of the system from light to dark.
A user has an option to enable dark mode instantly or during sunset or on a specific schedule. All the apple’s inbuilt apps now support Dark mode and third-party also have a choice to add dark mode.
Dark mode is mainly an appearance preference which alerts the system and participating apps to adopt darker color palettes. However, an app might show dark text on a light background by default, it may rather display white text on a dark background.
In 2018, Apple dark mode was first available for macOS 10.14 Mojave, and its immediate release with Safari 12, has taken the internet world by storm.
“Just after one year, Apple has finally released the dark mode for iPhone and iPad devices in iOS 13.”
In order to make your understanding better, we have adopted iOS 13 dark mode feature in our QIM app.
You may have question what is QIM? Let’s know in detail.
QIM App
QIM is one of our best selling applications. QIM stands for quick invoice maker and it is specially built in order to make invoice process easier and safe.
It consists of sleek design, that’s why is easy to handle and allows all businesses to make invoice of different types. It not only allows to make invoices for business transactions but also allows to track invoices with ease.
As you can observe from the above images of the QIM(Quick Invoice Maker) App that left-hand side images are displayed in the light mode and right-hand side images are displayed in the dark mode.
Apart from generating invoices, it also allows to edit or delete and share the invoice pdf or receipt template.
It also consists of a small calculation screen which allows businesses to do calculations with ease.
When you implement both the modes in your app, you give freedom to a user to use the app in a more convenient and effective way.
Benefits of including iOS 13 dark mode in your app
- Dark mode has more attention span of a user as it forces a user to look only at the important visuals of the app.
- Retina display consumes less power in dark mode.
- It doesn’t affect the circadian rhythms of the user as one will be able to use it late at night.
- UI will be more responsive to any text, as a user can use the app anytime from the morning, noon, evening, party time, apocalypse and gardening.
- User doesn’t have to readjust their eyes when they use the app in dark mode.
What will happen if you don’t adopt a dark mode in your app?
List of things might happen if you don’t implement dark mode in the iOS app:
- Your app downloads may be decreased if you don’t include this mode.
- Users will not be able to use your app with ease at night as it doesn’t have a dark mode.
- You may not be able to give a tough competition to all the other apps in the market.
Therefore, it is highly suggested to integrate dark mode in your iOS app. Now, if you made your mind to adopt a dark mode in your iOS app, then you take help from dedicated iPhone developers.
They are familiar with all the latest tools and technologies and possess skills that are needed to develop an iOS app as per your needs and requirements. Hence, they will be able to implement dark mode in your app with ease.
You may have a question, how will I able to implement dark mode if i have made my app through a hybrid framework such as ionic. In such a case, you have to go through a lengthy process of changing various class properties, it will consume a lot of your time.
In order to avoid this, we suggest you convert your current hybrid app into a native app. Because it is comparatively easy to implement dark mode in the native app.
Also Read: Native App Development Vs. Hybrid App Development
Now, here we will provide a step-by-step process to adopt a dark mode in your native iOS 13 apps.
How to implement Dark Mode in iOS 13?
Apple has done a wonderful job by creating an adaptable, convenient API and offering brilliant documentation to go with it.
If you are completely following Apple’s guidance, then you only have to change one line or code to get the app ready within a week. However, most apps are developed for solving users’ problems, hence, there might not be the clear path to reach from point A to point B.
Apple’s guidance for implementing Dark Mode is absolutely great for new projects however it doesn’t list you all the points that you should keep in mind while preparing your current app in iOS 13. Follow the simple six-step process to implement dark mode iOS 13.
Two Important Steps
In order to provide the best user experience to the user, you should not skip this part by any chance.
1. App is developed and released from Xcode11
If you are using Xcode 10 or the previous version, then the app will only display the standard appearance, even on the devices which support Dark Mode.
2. iOS 13 compatible devices
All the devices that are running on the iOS 13 support Dark Mode, earlier versions of the iOS do not support dark mode.
Your App Supports Dark Mode already
As soon as the above requirements have been fulfilled, anytime dark mode is enabled, your UI will instantly switch appearance.
Hence, you will be able to achieve dark mode for free. But, if you don’t ensure that your app looks great in dark mode, some part of the UI will look absolutely weird, possibly with the shiny bright colors, despite it has a new appearance.
Dark Mode is not only the latest mode
iOS has mainly two modes: default and high contrast. One can enable this setting in any iOS device by going to Settings->Accessibility->Increase contrast, click also on General if you are still using iOS 12.
Whereas you may be able to read with ease both left as well as right images, for someone having some difficulty might only be able to read high contrast text. However, there will also be users who can read any text.
Now, as we are aware of this, we have to take care of four appearances:
- Default
- Default High Contrast
- Dark Mode
- Dark Mode High Contrast
This is yet another important reason why you need to go with default UIKit as much as possible:
- If we can achieve this, We will get support for all the appearances for free.
- If we make our own UI and color components, we should make each mode, element, and element state ourselves. This work will grow over time.
Now, without much ado, let’s get started with the main topic:
1. Colors
If you have got all the colors right, then your app is compatible in the dark mode.
Dynamic System Colors
Until iOS 12, UIColor provided few colors like .red, .yellow, etc: you don’t want to use these colors any longer. These colors are static, hence their tint never changes.
UIColor defines some properties which return colors by their common name. These properties are highly complex in iOS 13, as they don’t automatically adjust for light or dark appearance.
For instance, setting a label’s color to .black looks absolutely great against the default UITableViewCell background, however, this is not suitable when the background becomes black as dark mode is enabled.
To ensure that your iPhone dark mode iOS 13 is ready, you have to replace all the instances of the UIColor class properties:
- red
- orange
- yellow
- brown
- green
- cyan
- blue
- purple
- magenta
- white
- lightGray
- gray
- darkGray
- black
Expect that you are not using the inbuilt UIColor constant for much other than occasional layout debugging, however, chances are you will likely find some instances of .black or .white sprinkled throughout your codebase somewhere.
In the best possible case, the change to support Dark Mode would be to replace any of the above-fixed color properties with the corresponding system -prefixed adaptable color below:
The above list also consists of a full range of grayscale colors, hence to differentiate between dark and light appearance becomes easier.
Dynamic Semantic Colors
Xcode 10 mainly provided two colors known as .lightext and .darktext.
They are not used now, as they are static and will not adapt to any interface. Rather than that, Xcode 11 allows you to utilize a new suite of semantic iOS colors such as UIColor.label, UIcolor.placeholderText, UIColor.systemBackground, etc.
Rather than describing the shade, these colors are based on their proposed usage, the majority of the time you want to use these system colors, they are dynamic.
Semantic colors make sure the app has the same appearance as the rest of the system. By utilizing this, your app will feel native, that’s the best experience to the user.
The more you will utilize these dynamic colors, the faster your app’s ability to adapt to Apple dark mode.
Dynamic Custom Colors: The Assets Catalog
In this process, you and your team have to go through a lot of trials and errors. Leave this part for Apple as they have invested a substantial amount of time from their highly skilled team on this, trust and follow their process, your app will be fine.
Keeping in mind the disclaimer, how can you define and use the dynamic colors?
From iOS11 & Xcode 9 we can include colors into the asset catalog.
As of now, you can also set the dark variant of each color in there as well:
To achieve Xcode dark mode, choose a color in your assets catalog, open the Attribute Inspector and change its appearance from None to Any, Dark or Any, Light, Dark.
Now you will be able to view a new color box for Dark appearance. You have just made your first dynamic color! Allocate proper tint to all the colors and you are set to go.
Moreover, also enable high contrast as well:
Also, we recommend you to utilize System and Semantic Colors as much as possible: consider button, for instance, using custom colors means defining one color for each button states: .normal, .highlighted, .focused,. selected and .disabled.
This simply means that an app requires different color for each state, for each appearance. If you calculate, one button needs (5 states * 4 appearances) = 20 different tints.
Dynamic Custom Colors in Code
If you are currently targeting iOS 10 or don’t want or unable to follow the above options, then the last option is to define colors in code:
If you have to use dark mode in your app, the main color logic which are used in dark and light mode are implemented in UITraitCollection completion block.
We suggest you don’t follow this process, instead of drop iOS 10 and go with the asset catalog.
2. Images
Majority of apps display images or symbols in the UI. If and only if those images display user content, then it’s an absolutely good design to have one image for each action.
SF Symbols
Apple released SF Symbols at WWDC19. SF Symbols consists of a wide collection of glyphs (1500+) which are available for developers to use in their apps.
Apple utilises SF Symbols in majority of stock apps like Reminders, Maps, News, etc.
Apple also encourages all the other developers to use SF symbols. Apple states,
“The system uses SF Symbols, which automatically look great in Dark Mode, and full-color images that are optimized for both light and dark appearances. Use SF Symbols wherever possible.”
When you are using a storyboard, you can inform Xcode which symbol to use by typing the right glyph name in the image name field.(find the name in Apple’s SF Symbols app available in Apple SF Symbols guideline).
On the other hand, you can retrieve any of them using the new api UIImage(systemName:):
If you are not able to find desirable symbol, you can export from the SF Symbols app and change them as per your requirement.
If you want to access the entire list of symbols anywhere and anytime, then well-known developer Noah Gilmore has developed a new website, sfsymbols.com.
Custom Template Images (Glyphs)
Similar to SF Symbols are monochrome images that are defined in our Xcode assets catalog by choosing “render as” Template Image in the Attribute Inspector.
By utilising them, you will get certain benefits. Out of which, one benefit is that you will get dark mode for free.
Other Images
For any type of images which are not available as template images or symbols such as photos or more, you can follow the same steps as the custom colors: set their appearance to Any, Dark in the asset catalog and select a new variant for each appearance.
3. UIVisualEffectViews
Similar to UIColor’s, until iOS 12 we had static UIBlurEffect.Style’s known as.dark, .light and .extralight.
Xcode 11 has redesigned these styles with brand new Semantic Materials:
We go from a soft, semitransparent .systemUltraThinMaterial, to .systemThinMaterial, till we reach a heavy .systemThickMaterial.
Here the text vibrancy dynamically adapts depending on the interface appearance and on the UIVisualEffectView. You don’t have to stress about the Readability as iOS takes care of all the things.
4. Drawing Attributed Text
While drawing attributed text, the .foreground color property is kept .black: fix it to appropriate color instead. (e.g. UIColor.label).
5. Dark Mode in CALayers
CALayers don’t grasp the dynamic colors. While working with dynamic colors at this level, you will receive existing UITraitCollection from the layer’s view by calling view.traitCollection.
As soon as it is obtained, you can resolve any dynamic color for example with:
If you want to resolve multiple colors at a time, then UITraitCollection consists of a performAsCurrent(). method by which you can achieve that:
6. Overriding the System Appearance
Several times it is okay for a view to stick to one appearance, irrespective of the system preference. In iOS13, UIView, UIViewController, and UIWindow have obtained a new overrideUserInterfaceStyle property that allows you to override the system appearance.
overrideUserInterfaceStyle is an enum case of type UIUserInterfaceStyle. This enum cases are light, dark, or unspecified, which states that the view/viewController/window will adapt the interface from its superview/parentController/system.
Setting this property will have a great impact on the specific view/viewController/window and all the things below it.
By implementing this, its view and all its sub views will adopt your preference rather than system one.
If you would like to view, go back to listen to the system interface, then set back the overrideUserInterfaceStyle property to .unspecified.
All these things listed above play a vital role during the iPhone Application Development.
A Closer Look
If your app completely depends on the storyboard, then you are set to go. But, if you are not using a storyboard, then follow along with us:
Draw Time
iOS chooses the correct tint/image of our dynamic colors/images at draw time: however when “draw time” occurs exactly?
You may be familiar, our views can become invalid at some point in their lifetime. For instance, a user rotated the screen, at this time UIView needs to add a new element in the interface, etc.
From this point, our views will be disabled when the interface appearance changes.
Your iOS app will pick the right tint/material/image anytime you are inside the following methods:
UIView
draw()
layoutSubviews()
traitCollectionDidChange()
tintColorDidChange()
UIViewController
viewWillLayoutSubviews()
viewDidLayoutSubviews()
traitCollectionDidChange()
UIPresenationController
containerViewWillLayoutSubviews()
containerViewDidLayoutSubviews()
traitCollectionDidChange()
Hence, it is highly recommended to put logic in any of them.
Please note that you don’t keep appearance-specific code in init, viewDidLoad or other places:
these processes will not be triggered again when/if interface appearance changes.
Debugging Dark Mode
Now you are ready to adopt the Dark Mode. There are some essential things that you need to consider:
Storyboards
In storyboard and xib files, apart from selecting the device and orientation to preview your screens, you can also switch the interface preference between light and dark.
Simulator
In Xcode 11, it consists of a new button in the debugging toolbar: this button allows you to access to an environment overrides popup that allows you to change font and switch interface mode, you can also switch on high contrast!
Use it to test both interfaces on the simulator, this is the best way to change the interface appearance in there!
Summary of the Whole Process
Now, if you have finally decided to adopt iOS 13 dark mode, then here’s a simple checklist to follow:
- Download and Install Xcode 11.0 or latest
- Build and Run your app when dark mode is enabled
- Fix all the errors that you have found
- Add dark variants to all your properties
- Adapt Dark Mode one screen at a time:
- Ensure to set the foreground key while drawing attributed text
- Swift all your appearance logic in the “Draw Time” functions
- Test your app in both modes, light and dark mode
- Don’t forget to change your LaunchScreen storyboard
1. Start from the xib’s files
2. Shift to storyboards
3. Shift to code
4. Repeat all the screens one by one
Conclusion
By following the above process, you will be able to implement iOS 13 dark mode in your app with ease and confidence.
If you still face any of the issues, then you can contact an iOS development company, who will help you to implement dark mode in iOS 13.
