For this chapter, you'll need to download Xcode version 11.4 or above from Apple's App Store.

You'll also need to be running the latest version of macOS (Catalina or above). Simply search for Xcode in the App Store and select and download the latest version. Launch Xcode and follow any additional installation instructions that your system may prompt you with. Once Xcode has fully launched, you're ready to go.

Download the sample code from the following GitHub link: https://github.com/PacktPublishing/Mastering-iOS-14-Programming-4th-Edition.

In this section, we'll start by taking a look at what exactly Dark Mode is, how we can use it, and what it can do not only for the end user but also for developers. We'll cover everything from enabling it on our devices to using environment overrides in Xcode and developer options in the simulator.

Understanding why we would need Dark Mode

As I covered in the introduction of this chapter, most of us have been craving dark mode in iOS for a very long time now. Us developers got our Xcode fix back in 2018 – but one of the burning questions I've been asked many times (especially in the past 12 months) is…why?

It could be down to something as simple as the time of the day. Satellite navigation systems have been doing it in our cars for years – as soon as the sun goes down, our system switches, and a more relaxing, subtle version of our road home pops up on our screen – so why not do that for our apps?

Well, it turns...

So far in this chapter, we've covered not only what dark mode is but also what it has to offer from a development perspective.

In this chapter, we're going to deep dive further into dark mode by looking at how Xcode dynamically handles our UIViews (and objects that are sub-classed from UIViews).

We'll start by understanding the core concept behind adaptive and semantic colors, and by following a simple pattern, Xcode can do so much of the heavy lifting for us.

We'll then dive further and take a look at the various levels of semantic colors available to us, including primary, secondary, and tertiary options, but more importantly, when we would be expected to use them.

What are adaptive colors?

For me, this was a major step in getting developers on board with designing and developing their apps for dark mode and, of course, it was well within Apple's interest to make it as seamless as possible for the developer...

Since the ability to add colors to the asset catalog became available back in Xcode 9, there is now even more reason to take full advantage of one of Xcode's prized assets.

In this section, we'll look at how we can use the asset catalog not only to create our custom colors but also to create our own adaptive colors and images, allowing us to harness the power of Xcode when developing dynamic appearance applications.

Using custom adaptive colors

Sticking with our current project, head on over to the file inspector, and highlight the Assets.xcassets folder. With the following layout visible, click on the + button highlighted in the following screenshot and select New Color Set from the list of options:

Figure 2.19 – Creating a color set

Add in another three color sets and name them the following:

• brandLabel
• brandSecondaryLabel
• brandTertiaryLabel

Highlight brandLabel...

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...

In this chapter, we've covered a lot about Dark Mode – not only from a programmatic perspective but also the theory behind the appearances and purpose of colors used within our apps.

We started by taking a look at how Xcode and iOS are set up for Dark Mode, learning about the environment overrides used in Xcode, and how we can even switch appearances in our storyboard while developing.

Next, we covered adaptive and semantic colors, and learned not only how these are used with Apple's default system colors but also how we can create dynamic and adaptive color sets ourselves.

Following on from what we learned about color sets, we applied this to images and harnesses the power of the assets catalog.

Finally, we covered some "great to know" topics, such as Dark Mode in SwiftUI, programmatically hailing appearances, and accessibility.

In the next chapter, we'll take a look at lists in iOS 14, covering everything you need to know about...

• Apple human interface guidelines (dark mode): https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
• Apple human interface guidelines (color): https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
• Asset catalog reference: https://developer.apple.com/library/archive/documentation/Xcode/Reference/xcode_ref-Asset_Catalog_Format/index.html