SwiftUI Dark Mode: Creating Dark Aesthetics of your Apps

SwiftUI provides a versatile platform for iOS app development, and one aspect that can greatly enhance the user experience is Dark Mode. However, by default, SwiftUI previews are in light mode. In this tutorial, we will explore how to enable SwiftUI Dark Mode in both previews and the iOS Simulator. 

This comprehensive guide will take you through the entire process, ensuring your app looks and feels just the way you want it.

How to Enable Dark Mode in SwiftUI Previews

Step 1: Create a New Xcode Project

To get started with SwiftUI Dark Mode, you’ll need Xcode 11 and macOS Catalina, which you can download from the Apple developer portal. Open Xcode and create a new project by selecting iOS as the platform, choosing the Single View App template, and naming it “SwiftUIDarkModePreviewTutorial.” 

Make sure to check the “Use SwiftUI” checkbox.

Step 2: Modify ContentView.swift

In your project, locate ContentView.swift in the Project navigator. Inside the ContentView struct, replace the existing code with the following:

struct ContentView: View {
    var body: some View {
        Text("Dark mode Preview")
    }
}

Step 3: Embed Views in a Navigation View

At its current state, SwiftUI Dark Mode previews only work if the views inside ContentView are embedded within a navigation view. 

Modify the code as follows:

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Dark mode Preview")
        }
    }
}

Now your preview will be displayed in dark mode, enhancing your development experience.

Explore the world of action sheets for seamless user interactions Action Sheet: A Guide to Creating and Using Action Sheets

Enabling Dark Mode in the iOS Simulator

Step 4: Adding Environment Values

Enabling dark mode in the preview doesn’t automatically enable it in the iOS Simulator at startup. To address this, add the environment value to the navigation view as shown below:

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Dark mode Preview")
        }.environment(\.colorScheme, .dark)
    }
}

Finally, build and run your project to witness Dark Mode in action in the iOS Simulator.

Conclusion

Incorporating SwiftUI Dark Mode into your app’s design not only makes it aesthetically pleasing but also improves user comfort, especially in low-light environments. This feature can help your app stand out and adapt to users’ preferences seamlessly.

Remember to keep testing your app in both light and dark modes to ensure a consistent and pleasing user experience. By mastering SwiftUI Dark Mode, you can create a more engaging and versatile app that caters to a broader audience.

SwiftUI Dark Mode is a powerful tool for enhancing your app’s appearance and usability. By following the steps outlined in this guide, you are well on your way to creating an app that is not only visually appealing but also highly functional, all while accommodating users’ preferences for dark or light mode.