How to preview light and dark mode in XCode Previews

Oscar de la Hera Gomez
Two flowers that represents SwiftUI and XCode side by side with the text “Preview Color Scheme” beneath it.

Use the "preferredColorScheme" modifier along with ".dark" or ".light" to preview dark or light mode.

A screenshot of Xcode showing the code we used to preview light and dark mode.

The code for the image above can be found in the repository below.

To preview light or dark mode, use the "preferredColorScheme" modifier along with ".dark" or ".light".

In the event that you wish to activate multiple previews, use the ForEach(ColorScheme.allCases, id: \.self) { scheme in } closure.

To learn more about creating multiple previews, consult the link below.

Looking to learn more about SwiftUI, Swift, Design and Technology?

Search our blog to learn more about Swift, SwiftUI, design and technology.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details