Your Second iOS & SwiftUI App

Transcript: 13. Color Schemes

In iOS, you can easily set a color for your app that will be applied to certain views, like button labels, to achieve a desired theme.

It’s called the “accent color”, and it’s easy to work with, in the Asset catalog, which gets created with every new project.

In the Assets.xcassets file, select AccentColor. This color set, with this name, is special. An app will use this as a global setting.

To alter it from the default blue: show the Inspector pane and select the Attributes Inspector.

Then, for Appearances, select Any, Light, Dark. Select the Light Appearance swatch, and set its Color to systemOrangeColor.

For Dark Appearance, use systemPurpleColor. And although this “Any Appearance” is never going to be used, we need to set something for it, for the other two to work. Let’s go with systemPinkColor, which will draw attention to itself if anything ever goes wrong.

And now we’re done with the Inspector. You can hit option-command-zero to close it.

So far we’ve just been looking at our previews in Light mode. But I’d like to see them in Dark mode with the purple accent color as well!

Book views is the place we’ve putting all of our view code that gets used throughout the app, so let’s start there.

All the way at the bottom of the file, we could manually create a dark and light version of every preview.

On the top of the preview, click the far right button to duplicate the entire thing. Then change one of them to use the Dark color scheme in the inspector. And there’s our dark and light versions!

But instead of doing that manually for every preview, we can wrap similar functionality up in a View extension to easily see all of our previews in Light and Dark mode without all this code duplication.

So undo all of that, and just above Book Previews, open an extension on View

    self.init(systemName: symbolName)
  }
}

extension View {

}

Then let’s make a property with the name previewedInAllColorSchemes. That will, itself, also be some View.

extension View {
  var previewedInAllColorSchemes: some View {

  }
}

What we want to do in here is create an instance of our previews for each color scheme, and then apply that color scheme. If you type ColorScheme, and control-command-click on it…

  var previewedInAllColorSchemes: some View {
    ColorScheme
  }

…you can see that it is CaseIterable.

So its allCases property will give us light mode, and then dark mode. Also, it’s Hashable.

Which means that, similar to with a List, we can use a ForEach view…

  var previewedInAllColorSchemes: some View {
    ForEach(<#T##data: _##_#>, id: <#T##KeyPath<_.Element, _>#>, content: <#T##(_.Element) -> _#>)
    ColorScheme
  }

…iterate over both ColorScheme cases…

    ForEach(
      ColorScheme.allCases, id: <#T##KeyPath<_.Element, _>#>, content: <#T##(_.Element) -> _#>)

  }

…use each case as its own id…

      ColorScheme.allCases, id: \.self,
      content: <#T##(_.Element) -> _#>)
  }

…and now you just need a closure which takes in the ColorScheme as an argument, and returns a view. The preferredColorScheme modifier is such a closure! So we can pass it in directly, and it will be called on each Color Scheme case.

      ColorScheme.allCases, id: \.self,
      content: preferredColorScheme
    )

While we’re here, let’s add that to our Book previews.

      Book.Image(title: "📖")
    }
    .previewedInAllColorSchemes
  }

When you use ForEach with previews, this is the result you get: a separate preview for every iteration — very handy!

There’s no accent color being used here, but it’s nice to know that titles will show up against a black background. And over in ContentView…

Same deal, for now. No pretty accent colors.

  static var previews: some View {
    ContentView()
      .previewedInAllColorSchemes
  }

Then, to the file where we’re actually using the accent color at this point: DetailView.

  static var previews: some View {
    DetailView(book: .init(), image: .constant(nil))
      .previewedInAllColorSchemes
  }

Reload the preview if you need to…

Perfect. The button is using our custom accent color! Orange in light mode, purple in dark mode.

While we’re making things shiny, we may as well add a custom App Icon.

In the Asset catalog, delete this default, empty AppIcon that got created automatically with the project. In the Resources folder for this episode, there’s an AppIcon.appiconset folder, to replace it.

Drag that whole folder in, in the area below your new AccentColor. Then, build and run!

Hit shift-command-H to go to the home screen, and there’s the app icon. Also in the materials for this episode, there’s a folder full of “Book Photos”.

Select all of the images, not the folder, and drag them all onto the simulator to import them.

If you drag the folder itself, it will try to import them into the Files app instead of the Photos library. bWhile we’re in the simulator, we might as well check out Dark mode.

Switching appearance modes is under the Simulator’s “Features” menu as “Toggle Appearance”. Or you can use it’s keyboard shortcut - Shift-Command-A

Now jump back to the ReadMe app! I’ll use Shift-Command-H with a double tap on the “H” to get to the app switcher.

Back in our app, select a book. Notice the purple accent color on the back and Update Image buttons! And now you can use your own images, for your books!