Adapting Dark Mode on Your Project, Swift 5

Overview

After apple relieved the iOS Dark Mode theme, many were happy. It was one of the features we were waiting for since macOS Mojave’s dark mode. The first thing we were checking was our projects that we have worked on. How to support dark mode in it, how it would look etc.

It is very simple and easy to change. As in this blog, we’ll see how to use the system’s color and custom color as well for the dark mode. We’ll also see how to set images & icons for light & dark mode.

Minimum Requirement:

  • Xcode 11 (beta or above)
  • iOS 13 (beta or above)

Without wasting time let’s jump directly into the 1st topic: Set system color for dark mode.

This is my design for the light mode:

dark_image4

System Color

Apple has provided some good range of adaptable color, we can use and it automatically sets the color for the dark mode. We just want to set those adaptable color, and it will adapt its color for the dark & light mode. It’s that simple.
Let’s see how.

First, we will change our color for our Title label and background. By just selecting the system’s adaptable colors. E.g. Changing the system’s blue to systemBlue. I have selected systemBackgroundColour for my main view.

dark_image2

We can also use these colors programmatically too.

Let’s see now, how it looks in the iOS device dark mode.

dark_image3

Custom Color

For custom colors, we can add it to the asset file. In asset_file.asset < right-click into it > New color set. You will see the color in the list. Now select the color and in the attribute inspector, go to the Appearance and select Any, Dark. You will see 2 colors on the board. Change both the color according to your requirement for light and dark mode and give a proper name.

dark_image5

You can use this custom color through the storyboard and programmatically as well. In the storyboard, you can see it in the color list. And programmatically, you can access like this.

As we can see the segment controller in design looks thrown off a bit I’m going to create a custom color for it for both dark and light mode and so for my subtitle label to give it a little darker color.

dark_image6

Images & icons

For images & icons, steps are similar to a custom color. Select the image, in the Attribute inspector, go to the Appearance and select Any, Dark. You will see the empty box to upload images for the dark mode.

I’m going to change the sun image, if its an icon or a template image you can simply change the tint of the image as well, For example. The images in the segment controller are template image and their tint is handled by the system. here I will add a new image for the dark mode.

dark_image7

dark_image8

dark_image9

Other methods & property

We can use many ways to detect the dark mode and change the property in the app or on the individual screen as well.

1. Notification:

It is one of the ways to detect the change in the dark mode.

2. TraitCollection property:

The dark mode is the party of the Trait Collection, thus the changes in the trait regarding appearance/interface style will be detected in the Trait collection method.

However, the trait collection consists of other traits and the method will get called in other like the device orientation change. Thus to detect the appearance change you can use the code below:

Not ready for Dark mode?

If you are just not yet ready to adopt the dark mode you can simply override the user’s choice by using

or

You can do this for one screen or the whole application.

Another way to keep a default interface for your app ignoring whatever user has set you can simply add a key pair in your info.plist

Open your info.plist as Source Code
Add the key-value pair just above

Conclusion

Ready or not Dark mode is here and soon people will be addicted to it and will want them in most apps they use. Better to do it now then to go back and do it again!!

mm

Risabh Singh iOS Developer

“Converting Dream into Codes” I do things that I love, and programming is a big part of it. As a developer, I try to grab all that opportunity that is challenging. Working in the Yudiz solution, I got all the opportunity and challenges

Comments are closed.

Top