Exploring visionOS: Dimming the Surroundings

When I was messing around with the Apple Vision Pro, I saw this dimming feature in the Photos app. When you enlarge a picture, the surroundings get dimmed, giving you a more immersive viewing experience. I wanted this effect in my app, too.

preferredSurroundingsEffect

So, I started exploring and came across the preferredSurroundingsEffect(_:) view modifier. The documentation mentions that it applies an effect to the passthrough video. This takes a SurroundingsEffect? structure as its parameter. The option that caught my eye was systemDark. The name alone suggested that this might be just what I needed to achieve the dimming effect I was after.

The provided example showcased within an immersive space:

ImmersiveSpace(id: "orbit") {
  Orbit()
    .preferredSurroundingsEffect(.systemDark)
}

I was curious to see if I could use it to achieve the same effect as the Photos app by applying it to the window.

I added it directly to the main view, and a toggle to change the bool value.

struct FusionVisionApp: App {
  @State private var isDarkSurroundingEffect = false
 
  var body: some Scene {
    WindowGroup {
      MainView(viewModel: MainViewModel(), isDarkSurroundingEffect: $isDarkSurroundingEffect)
        .preferredSurroundingsEffect(isDarkSurroundingEffect ? .systemDark: nil)
        .onChange(of: isDarkSurroundingEffect, perform: { _ in
          print("isDarkSurroundingEffect", isDarkSurroundingEffect)
        })
    }

The .systemDark effect dims the surroundings when the isDarkSurroundingEffect variable is set to true. I decided to give it a try and the surroundings did dim when the view was displayed!

Examples

Here is an example from the simulator with the Living Room (Day) simulated scene, with no preference for the surrounding:

The same scene with a darker surrounding:

When the simulated scene is of night, the difference is more visible:

The darker surroundings draw attention to the app's content while still enabling people to remain aware of their surroundings:

While it is not much distinguishable in the simulator, it does make a difference on the actual Apple Vision Pro. I am happy with how this turned out. It is a simple yet effective way to create a more immersive experience. Happy coding!