Add Dark Mode theme support to apps in iOS

Tram Ho

Dark Mode: add support for your application in Swift

Dark Mode was introduced in iOS 13 and was announced at WWDC 2019. It adds a darker theme for iOS and allows you to do the same for your application. This is a great addition because it provides your users with a new, more unique design experience.

In this article, I will share with you my experience after adding Dark Mode to my application.

1. How to exit and turn off Dark Mode

Before I dive into the dark mode, I want to tell you how you can get out of this mode. When you start building your application with Xcode 11, you will notice that the interface is darker because it is enabled by default.

If you don’t like the Dark Mode, you can disable it by adding UIUserInterfaceStyle to your Info.plist file and setting it to Light .

2. Override Dark Mode for each ViewController

You can override the UI type on each ViewController and set it to .light or .dark with the following code:

3. Overwrite Dark Mode for each View

You can do the same for a UIView , for example:

4. Overwrite Dark Mode for each Window

Overwriting the type of user interface on each Window can be helpful if you want to turn off Dark Mode then write the following code:

Note that I’m using the windows array here because the keyWindow attribute in shared by UIApplication no longer used since iOS 13. Not recommended to use it because current applications can support many scenes that all have. window attached.

5. How to enable Dark Mode to test

If you start to implement the Dark Mode interface in your application, it is important to have the best test. There are many ways to activate and toggle appearance mode, all of which have their own advantages.

5.1 Activate Dark Mode on the emulator

Navigate to the Developer page in the application installed on your emulator and turn on the switch for the dark theme:

5.2 Activate Dark Mode on the device

On your device, you can turn on Dark Mode by navigating to the Display & Brightness page in the settings app. However, during development, adding an option to the control center quickly switches between dark and light modes, as follows.

5.3 Switch to Dark Mode from the debug menu

When working in Xcode with an open emulator, you might want to use the environment override window instead. This allows you to quickly switch appearance while debugging:

Note: If you do not see this option, you may be running on an iOS 12 or lower device.

5.4 Activate Dark Mode in Storyboards

While working with your views inside the Storyboard, it may be helpful to set the interface to dark in the Storyboard. You can find this option next to the device selection below:

6. Conclusion

I mentioned a lot of ways to adjust the Dark Mode in your application. Hopefully, this will help you make this mode a little more efficient!

So my writing is up here 😁. Hopefully my article will help you apply it to the project

Thank you for following the article. 😃

Share the news now

Source : Viblo