Search code examples
swiftuixcode11

Xcode 11 - SwiftUI Preview Dark Mode

In Xcode 11, we can enable dark mode when the app is running by toggling the Environment Overrides at the bottom of the debug area like so.

Environment Overrides

SwiftUI has the Canvas editor which generates live previews of the app as you are building your interface.

Is there a way where we can toggle to dark mode in these previews?

Solution

  • You should have something like this at the bottom of the file that's being previewed. This is what Xcode uses to generate the preview:

    #if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

    To change the preview to dark mode, you just need to specify a colorScheme:

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

    Or, you can even chose to preview light and dark mode at the same time:

    static var previews: some View {
    Group {
        ContentView().colorScheme(.light)
        ContentView().colorScheme(.dark)
    }
}

    I recommend watching the Introducing SwiftUI session for more examples of SwiftUI and how powerful the previews can be.