Updated for Xcode 14.2
SwiftUI can load light and dark mode images directly from your asset catalog depending on the user’s current appearance setting, but if you aren’t using an asset catalog – for example if you downloaded the images or generated them locally – you need to do a little extra work.
The simplest solution is to create a new view that handles both light and dark mode images, like this:
struct AdaptiveImage: View {
@Environment(\.colorScheme) var colorScheme
let light: Image
let dark: Image
@ViewBuilder var body: some View {
if colorScheme == .light {
light
} else {
dark
}
}
}
That allows you to pass both images in, and SwiftUI will automatically select the correct one for both light and dark mode:
struct ContentView: View {
var body: some View {
AdaptiveImage(light: Image(systemName: "sun.max"), dark: Image(systemName: "moon"))
}
}
That works great if you just want to flip between light and dark mode images, but if we add a little extra code we can create a wrapper view able to display completely different content depending on light and dark mode:
struct AdaptiveView<T: View, U: View>: View {
@Environment(\.colorScheme) var colorScheme
let light: T
let dark: U
init(light: T, dark: U) {
self.light = light
self.dark = dark
}
init(light: () -> T, dark: () -> U) {
self.light = light()
self.dark = dark()
}
@ViewBuilder var body: some View {
if colorScheme == .light {
light
} else {
dark
}
}
}
That retains the same simple initializer, but now adds alternatives that accept closures. So, with that more advanced version we can now flip between more complicated layouts:
struct ContentView: View {
var body: some View {
VStack {
AdaptiveView {
VStack {
Text("Light mode")
Image(systemName: "sun.max")
}
} dark: {
HStack {
Text("Dark mode")
Image(systemName: "moon")
}
}
.font(.largeTitle)
}
}
}
SPONSORED Play is the first native iOS design tool created for designers and engineers. You can install Play for iOS and iPad today and sign up to check out the Beta of our macOS app with SwiftUI code export. We're also hiring engineers!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Link copied to your pasteboard.