WWDC23 SALE: Save 50% on all my Swift books and bundles! >>

How to show different images and other views in light or dark mode

Paul Hudson    @twostraws   

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)
        }
    }
}
Save 50% in my WWDC23 sale.

SAVE 50% To celebrate WWDC23, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Similar solutions…

BUY OUR BOOKS
Buy Pro Swift Buy Pro SwiftUI Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

Average rating: 5.0/5

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.