Spatial SwiftUI: Preferred Surroundings Effect

Joseph Simpson

We can use this SwiftUI modifier to adjust the lighting and tint color for the passthrough feed.

Overview

Have you ever noticed that visionOS will add a dark tint to the passthrough video feed when viewing Apple Photos? We can add this effect to our apps using preferredSurroundingsEffect. There are three preset effects and two options to customize this.

VStack {
...
}
// Presets
.preferredSurroundingsEffect(.semiDark)
.preferredSurroundingsEffect(.dark)
.preferredSurroundingsEffect(.ultraDark)

// Color
.preferredSurroundingsEffect(.colorMultiply(.red))

// Intensity
.preferredSurroundingsEffect(.dim(intensity: 0.5))

The obvious place to use this is in Immersive Spaces. It can add an extra layer of immersion to mixed or progressive spaces. We can also use this on views in Windows or Volumes. Just be aware that the scene hosting the effect must be the active interface for the user. If we place this on a window, and the user taps into another window, the effect will fade out.

Bonus: The three preset values have an undocumented bonus feature. These will change the lighting of Apple-provided system environments. Check out the video demo to see this in action.

Video Demo

Example Code

struct Example132: View {

    @State private var effect: SurroundingsEffect? = nil

    var body: some View {
        VStack {
            Text("Spatial SwiftUI: SurroundingsEffect")
                .font(.largeTitle)
            HStack(spacing: 12) {
                Button(action: {
                    effect = nil
                }, label: {
                    Text("Unset")
                })
                Button(action: {
                    effect = .semiDark
                }, label: {
                    Text("Semi Dark")
                })
                Button(action: {
                    effect = .dark
                }, label: {
                    Text("Dark")
                })
                Button(action: {
                    effect = .ultraDark
                }, label: {
                    Text("Ultra Dark")
                })
            }
        }
        .preferredSurroundingsEffect(effect)
    }
}

Support our work so we can continue to bring you new examples and articles.

Support our Work

Download the Xcode project with this and many more examples from Step Into Vision.
Some examples are provided as standalone Xcode projects. You can find those here.

Follow Step Into Vision

Questions or feedback?