Your First iOS & SwiftUI App: Polishing the App

Mar 1 2022 Swift 5.5, iOS 15, Xcode 13

Part 1: SwiftUI Views & View Modifiers

4. Dark Mode

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See versions

See forum comments
Cinema mode Mark as Complete Download course materials
Previous episode: 3. Colors & Gradients Next episode: 5. Challenge: Colors & Dark Mode

This video was last updated on Mar 1 2022

One of the most-loved features on iOS is Dark Mode - the ability to click a button in Settings to see your apps using primarily dark colors. This is particularly useful at night or in low-light environments, where too much light is a stress on your eyes.

As an iOS developer, it’s your job to make sure your app supports dark mode, and that it looks just the way you want it to in dark mode.

Luckily for us, Luke has already specced out how the app should look in dark mode; including some changes to the background color and some other elements. We just need to implement this with SwiftUI.

So join me, and let’s feel the power of the dark side!

In the Canvas, show how you can click the button to the right of Preview to bring up the “Inspect Preview” panel, which lets you modify the preview settings. Change the scheme to Dark.

Manually rearrange the previews as follows:

ContentView()
ContentView()
  .previewLayout(.fixed(width: 568, height: 320))
ContentView()
  .preferredColorScheme(.dark)
ContentView()
  .previewLayout(.fixed(width: 568, height: 320))
  .preferredColorScheme(.dark)

Show that when you switch to dark mode, the default colors of some of the controls changes: for example, the text views change their color from white to black.

But Bullseye doesn’t look great on dark mode currently becuase we’re using the gray background even in Dark mode. Luckly, the asset catalogue comes to the rescue! This is the third advantage of asset catalogues that I mentioned in the previous video.

Go to assets catalogue, click the background color. In Appearances, click Any, Dark.

Set the color to: #181818