How to preview light and dark mode in XCode Previews

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

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 08/19/2024 at 11:59
Last Updated on 08/30/2024 at 13:19
<p>Two flowers that represents SwiftUI and XCode side by side with the text “Preview Color Scheme” beneath it.</p>

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

SubscribeDownload Open Source SwiftUI Starter ProjectDownload Open Source VisionOS Starter Project
<p>A screenshot of Xcode showing the code we used to preview light and dark mode.</p>

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

Download Open Source SwiftUI Starter Project

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.

How to create multiple XCode previews within a single view

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

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

Search our Blog

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.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe