Video to re-record: Lesson 4.3
--- [START RE-RECORD 01:10 - 02:31] ---
01:10 (Voiceover explaining implicit stacking) "Franklin here. Let's create two different preview macros—one for light mode and one for dark mode."
(Voiceover continues alongside on-screen code progression)
From:
#Preview {
ContentView()
}(Voiceover) "First, if you try to do this by just duplicating the ContentView directly inside the existing macro..."
To:
#Preview {
ContentView()
ContentView()
}(Voiceover) "...notice that Xcode implicitly stacks them vertically into a single preview, even though you haven't used a VStack. This concept is called implicit stacking, and it applies not just in previews, but in views as well, like inside ContentView's body. To see them as two distinct previews in the canvas, you need to separate them into their own Preview macros. Move that second view into a new one."
To:
#Preview {
ContentView()
}
#Preview {
ContentView()
}(Voiceover) "Now you have two separate previews appearing directly in Xcode's preview canvas. As you can see, this makes it incredibly easy to visually compare different UI states. But right now they look identical. To tell them apart, give the second one a clear name."
To:
#Preview {
ContentView()
}
#Preview("Dark Mode") {
ContentView()
}(Voiceover) "Finally, to actually test how the app looks in the dark, apply the preferredColorScheme modifier to the view inside this new preview, passing in .dark."
To:
#Preview {
ContentView()
}
#Preview("Dark Mode") {
ContentView()
.preferredColorScheme(.dark)
}(Voiceover) "Now, you can clearly see this second preview is in dark mode because the text has automatically turned white—that's the default text color in dark mode. But you know what? It doesn't look great against the background color. You manually set that background to the nice light bluish-gray earlier, which is fine for light mode, but it stays exactly the same in dark mode because you haven't told SwiftUI to do anything differently yet."
--- [END RE-RECORD] ---