Further exploring Dark Mode

In the previous sections, we gave you a lot to think about when either creating or migrating existing apps to Dark Mode under specific circumstances. In this section, we'll take a look at a couple of little "nice to knows" that should always be in the back of your mind when approaching Dark Mode.

Using Dark Mode with SwiftUI

With the announcement of SwiftUI back in June 2019, a massive shift in focus on UI-based development took place. Released at the same time as Dark Mode, and as expected, SwiftUI takes full advantage of switching appearances.

Let's start by taking a look at how we could detect dark mode programmatically in SwiftUI:

1. First, we'll create an environment variable that allows us to access the current state of the appearance of the device:

   @Environment(\.colorScheme) var appearance

2. Next, let's use a simple ternary operator to display some text based on the current appearance:

   Text(appearance == .dark ? "Dark Appearance" : "Light Appearance")

It really is that simple.

Now, let's have a look at the options available to us in the automatic preview window. SwiftUI uses PreviewProvider, which allows us to display dynamically what we are designing/developing.

To enable Dark Mode in PreviewProvider, simply add the following highlighted code and hot refresh:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.colorScheme, .dark)
    }
}

Here, we've added a modifier to set the .colorScheme environment variable to .dark. If we want to preview both .light and .dark side by side, we can simply do the following:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView().environment(\.colorScheme, .light)
             ContentView().environment(\.colorScheme, .dark)
        }
    }
}

Tip

To learn more about SwiftUI, take a look at Learn SwiftUI, available from Packt Publishing: https://www.packtpub.com/business-other/learn-swiftui.

Programatically handling changes with trait collection

During the development of your new app, there could be a couple of occasions where you might need to handle a specific scenario based on the current appearance. However, we'll need to take a slightly different approach to this than what we did with the SwiftUI example previously.

The interface style is part of the UITraitCollection class (which, in turn, is part of UIKit). We can do a conditional check against a value using the following anywhere in our ViewController:

traitCollection.userInterfaceStyle == .dark

Unlike SwiftUI, we can't just use a simple ternary operator as there are more than two values for userInterfaceStyle:

public enum UIUserInterfaceStyle : Int {
    case unspecified
    case light
    case dark
}

Unspecified is an option too (think Any, back in our asset catalog), so it's best to use another approach when detecting changes to our interface style.

Let's start by heading back into our ViewController.swift file and adding in the following override function:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    // Logic here    
}

This override is called whenever a change is made to a trait (such as appearance). From this, we now action any changes we would like to make, but the problem we have is traits are used for more than just appearances, and this override could be called for a variety of reasons.

So, if we are looking particularly for changes in our appearance, we can use the previousTrait property passed into our delegate function and compare against the current system trait – if there is a difference, we know the appearance has changed. Let's take a look at how we'd do this:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    let interfaceAppearanceChanged = previousTraitCollection?.hasDifferentColorAppearance(comparedTo: traitCollection)
}

By using the hasDifferentColorAppearance method, we can now easily compare the previous trains against the current one to see whether there have been any changes – the resulting method returns a Boolean, so we can use this at our convenience.

Specifying an appearance for views, ViewControllers, and windows

You may, in some circumstances, wish to specify an appearance based on a particular area of your app or if you are migrating to dark mode (but need a little more time for a certain feature). Simply drop in the following appropriate code to meet your desire.

Views

Here, we'll create and instantiate a basic UIView:

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

We assign either a light or dark value.

ViewController

If we wanted to do this in a UIViewController, we would simply just do the following:

overrideUserInterfaceStyle = .dark

Again, we assign either a light or dark value (usually within viewDidLoad()).

Window

If we need to access the current window, we could do so as follows:

for window in UIApplication.shared.windows {
    window.overrideUserInterfaceStyle = .dark
}

(This is not a recommended approach and you would be hard-pressed to find any real reason to want to do this…)

Accessibility in Dark Mode

Ask around and someone will joke about how Dark Mode has existed in iOS for years, either as the Classic Invert or Smart Invert accessibility feature. I even had it on one of my slides at a conference about 2 months prior to Dark Mode being officially announced.

But with this in mind, a lot of things started to be said about accessibility in iOS – some comments referring to Dark Mode as "Apple finally supporting accessibility," which I have to be honest makes me very sad.

Accessibility has always played a massive part in iOS regardless of the appearance – but, even with the introduction of Dark Mode, this still goes unchanged as Dark Mode supports all accessibility features.

If you refer back to an earlier section in this chapter, Core development concepts in Dark Mode, you'll remember that we mentioned the option to schedule our light and dark appearances – much like you could with Nightshift that was introduced in iOS 9, again another element with a focus on accessibility.

In this section, we went a little outside of the box with regard to Dark Mode and stepped away from the basic implementation, allowing us to look at the wider options available to use and things to think about when implementing Dark Mode in our apps.