SwiftUI Gradient rendering incorrect colors on simulator

Question

When running on the simulator, Gradient is rendering colors incorrectly. When running on a device, Gradient renders the colors correctly. How can I get Gradient to render colors correctly on the simulator so that I can capture accurate screenshots?

Simulator versus device:

Example View with Gradient:

struct GradientView: View {
    
    private static let backgroundGradientColors: [Color] = [.red, .blue]
    
    var body: some View {
        ZStack {
            GeometryReader { geometryReader in
                let gradient: Gradient = Gradient(colors: GradientView.backgroundGradientColors)
                RadialGradient(gradient: gradient,
                               center: .bottomTrailing,
                               startRadius: 0, endRadius: geometryReader.size.width)
                    .edgesIgnoringSafeArea(.all)
            }
        }
    }

}

Answer 1

I just ran into this too. It obviously seems to be a bug in Xcode/Simulator, as everything looks correct on device.

This happens on my MacBook Pro 15" when it's attached to an external monitor, but interestingly everything appears totally normal in the SwiftUI preview and on Simulator when I run it on the normal built-in display.

So if you run into this and you're on a laptop with an external monitor, try unplugging and see if that helps.

Answer 2

This seems to happen if you use the built-in system colours. Once I changed to using asset catalog colours that have light and dark variants, they appeared correctly.

P.S. I had to delete the app from the sim each time I changed the colours to make them show correctly in the widget preview.