ios - Make SwiftUI view grayscale if an alert/sheet is presented

Question

In UIKit and SwiftUI, a sheet or an alert dims standard colors in the view on top of which they were shown. Every color in that view is grayscale during the presentation of an alert/sheet.

How can I dim my SwiftUI view's non-standard colors as well? I'm using my own colors and they do not dim by default.

Answer 1

Use the .saturation modifier to make your view grayscale when a given alert/sheet is visible.

The following example uses an alert. It utilizes the State variable used for the alert's isPresented parameter in the ternary operator:

.saturation(isAlertVisible ? 0 : 1)

---

struct ContentView: View {
    @State var isAlertVisible = false

    var body: some View {
        VStack {
            Text("Text")
                .foregroundColor(.red)

            Spacer()
                .frame(height: 300)

            Button {
                isAlertVisible = true
            } label: {
                Text("Button")
            }
            .alert(isPresented: $isAlertVisible) {
                Alert(
                    title: Text("Alert"),
                    message: Text("Message"),
                    dismissButton: Alert.Button.default(Text("OK"))
                )
            }
        }
        .saturation(isAlertVisible ? 0 : 1)
    }
}

Result