Supporting dark mode in iOS 13

Apple has introduced a new feature in iOS 13.0 called dark mode.When dark mode is enabled the apps that are build with iOS 13 will support dark mode. Dark mode is applicable for all UI related components.

Requirements:

Xcode 11 or later
- Xcode 11 is required to support the dark mode in our app, which contains all api for supporting .
iOS 13 device
- iOS 13 or later is needed to support the dark mode. For lower OS version, the application will display in light mode.

Thinks to be considered while implementing dark mode provided by apple:

• Focus on your content
Dark Mode focuses on the content areas of your interface, allowing that content to stand out while the surrounding UI recedes into the background.

• Test your design in both light and dark appearances
See how your interface looks in both appearances and adjust your designs as needed to accommodate each one. Designs that work well in one appearance might not work in the other.

• Ensure that your content remains legible
When you adjust the contrast and transparency accessibility settings, ensure that your content remains comfortably legible in Dark Mode .

Adopting color:

Apple has introduced system color to support the dark mode automatically. We can also use custom color.

view.backgroundColor = UIColor.systemBackground

If we use cgcolor it will not change automatically because they are not part of UIKit. So apple has provided a method called resolveColor according to trait collection of our application.

let resolvedColor = UIColor.label.resolvedColor(with: traitCollection)
layer.borderColor = resolvedColor.cgColor

Supporting custom color:

let color = UIColor(named: “Color")

Overriding Dark Mode:

In specific viewcontroller:You can override the user interface style per view controller and set it to light or dark using the following code:

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        overrideUserInterfaceStyle = .dark
    }
}

In specific view:

You can do the same for a single UIView instance:

let view = UIView()
view.overrideUserInterfaceStyle = .dark

Creating extension for color:

We can create your own UIColor extension to support both light and dark mode by checking the user interface style and return the specific color according to the interface style.

extension UIColor {
    public static var primaryColor: UIColor {
        return UIColor  { (traitCollection) -> UIColor in
            if traitCollection.userInterfaceStyle == .dark {
                return UIColor.red
            } else {
                return UIColor.blue
            }
      }
    }
}

Supporting image’s:

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.

System icon:

In iOS 13 we can use 1500 icons designed by apple, with variety of size and weights. The system icons are vector based they can be used in various sizes without any loss in quality.

let personFill = UIImage(systemName: "person.fill")

Test dark mode:

We can test the dark mode in simulator in Xcode 11, by using Environment Override option available in debug view in Xcode. There is a section called Interface style, which provides options to switch to dark mode or light mode. In that, select dark mode to switch our app to dark mode.

Disabling dark mode:

If there is no need for our app to support dark, Apple has provide way to disable dark mode for your app by adding a key-value pair in info.plist

<key>UIUserInterfaceStyle</key>
<string>Light</string>

In this blog, I have shared my experience on Dark mode support. Hope you know how to make your app support dark mode now. It may take some time to make your app support dark mode, but it will make users love your app!

Kavinkumar V.
iOS Development Team,
Mallow Technologies.

Mallow's Blog