Your First iOS & SwiftUI App: Polishing the App

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