Dark Mode is available for iOS 13 or later, allowing iOS users to enable a darker color palette for all screens.

As a developer, you must make some changes in your app to adopt Dark Mode.

Support Dark Mode

Supporting Dark Mode may require some effort to have a great result for each screen. As soon as you compile your code with Xcode 11 or above, Dark Mode is enabled.

To make your app look awesome with Dark Mode, you may need to do some changes in colors and images.

Updating colors

System colors automatically support Dark Mode, so if you’re using a black color for a text, the text color will be automatically set to white when the user enabled Dark Mode. But when you use custom colors, you have to set the darker color palette yourself.

Setting the darker color pallete yourself can be easily done when you make use of color library in the Assets.xcassets folder, which was introduced with iOS 11. If you make use of this, you must set the minimum deployment target to iOS 11 or higher or create a fallback for lower OS versions.

In the Assets.xcassets folder, select the color that should enable dark appearance. Go to the attributes inspector and select ‘Any, Dark’ in the appearance option. Now you can set the dark appearance color!

Enable the dark appearance for Dark Mode.
Enable dark appearance for each color in Xcode.

Updating assets

Some assets may need a dark appearance to be visible in Dark Mode. Adding a darker image is almost the same as colors. Select the image and set the appearance to ‘Any, Dark’ in the attributes inspector.

Using your own icons that consist of one color? Set a tint color to those icons, so you don’t need to add two icons to your app package. Don’t forget that your image should be rendered as a template to support tint colors.

Test Dark Mode

After you implemented Dark Mode, it is important to test each release in both light and dark mode. Xcode 11 contains a new functionality, environment overrides.

Using the environment overrides, you can override the simulator default settings, like font sizes and accessibility options. It also contains an option to switch between light and dark mode, which makes it possible to test changes in both styles.

The environment overrides functionality can be found in Xcode when your app is running. The option is located in the debug menu (see screenshot below).

Xcode environment overrides
Switch between light and dark appearance using the environment overrides functionality in Xcode.

Track Dark Mode usage

It’s easy to check if a user did enable Dark Mode. In an UIViewController, you can check the appearance by checking the following property:

traitCollection.userInterfaceStyle

The property UIUserInterfaceStyle is an enum, which can be set to light, dark or unspecified. You can track this property with analytics to get insights about the dark mode usage for your app, for example in the viewDidLoad function.

Disable Dark Mode

By default, Dark Mode is enabled when you compile code using Xcode 11. Currently, Dark Mode support is not required by Apple for an app submit, but this can be required soon.

If your app is not ready for Dark Mode, but you want to do a release using Xcode 11, you can disable this functionality. To disable Dark Mode, set the property UIUserInterfaceStyle to light in the info.plist.

During the setup of iOS, users are asked if they want to run the OS in light mode or dark mode. Because of this, many users will enable Dark Mode by default. If your app doesn’t support dark mode, users may dislike your app, which can result in a bad rating.

Conclusion

It may take some effort to implement Dark Mode by updating colors and assets, but as soon as you release your app update with Dark Mode support, users will love your app!

🚀 Like this article? Follow me on Twitter for more iOS related news!

Categories:iOS