Changing background color based on another View in SwiftUI?

Question

I have WheelView and WheelBackground, first one is a group of rounded rectangles that i rotate with a drag gesture based on degrees, second one is the background, changing its color based on degrees too, i would like to have these background colors like my squares, for example red square, red back, green square green back and so on...but i don't know how to change these colors based on degrees, any suggestions?

This is the wheel: https://imgur.com/a/N30ZkIe

And this is my code:

struct WheelBackground: View {
    @Binding var degree: Double
    
    var body: some View {
        Color.orange
            .opacity(0.4)
            .ignoresSafeArea()
            .hueRotation(Angle(degrees: degree))
    }
}

struct ContentView: View {
    @State var degree = -90.0

var body: some View {
        ZStack {
            WheelBackground(degree: $degree)
            
            WheelView(degree: $degree)
                .rotationEffect(Angle(degrees: degree))
       }
   }
}

struct WheelView: View {
    @State var radius : Double = 150
    @State var direction = Direction.left
    @State var chosenIndex = 0
    // degree of circle and hue
    @Binding var degree : Double
    // @State var degree = -90.0
    let array : [myVal]
    let circleSize : Double
    
    var body: some View {
        ZStack {
            let anglePerCount = Double.pi * 2.0 / Double(array.count)
            let drag = DragGesture()
                .onEnded { value in
                    if value.startLocation.x > value.location.x + 10 {
                        direction = .right
                    } else if value.startLocation.x < value.location.x - 10 {
                        direction = .left
                    }
                }
            
            ZStack {
                ForEach(0 ..< array.count, id: \.self) { index in
                    let angle = Double(index) * anglePerCount
                    let xOffset = CGFloat(radius * cos(angle))
                    let yOffset = CGFloat(radius * sin(angle))
                    
                    RoundedRectangle(cornerRadius: 20, style: .continuous)
                        .fill(array[index].color)
                        .rotationEffect(Angle(radians: angle + Double.pi/2))
                        .offset(x: xOffset, y: yOffset)
                }
            }
            .rotationEffect(Angle(degrees: degree))
            .gesture(drag)
            .onAppear() {
                radius = circleSize/2 - 47
            }
        }
    }
}

Answer 1

Refer to your question and comment, since you could not provide the code of WheelView(), this is the closest replicated view that I can make to demonstrate the solution for your problem. This code focuses on the logic that you want your background and square to have the same color whenever the color changes.

Try this below code:

struct TestContentView: View {
let allColors = [Color.red, Color.blue, Color.green, Color.orange, Color.purple, Color.pink]
@State var color = Color.red
var body: some View {
    ZStack {
        WheelBackgroundExample(color: $color)
        VStack {
            WheelViewExample(color: $color)
            Button("change") {
                color = allColors[Int.random(in: 0...5)]
            }
            .foregroundColor(.black)
        }
        
    }
}
}

struct WheelViewExample: View {
@Binding var color: Color
var body: some View {
    Rectangle()
        .fill(color)
        .frame(width: 200, height: 200)
        .border(.black)
}
}

struct WheelBackgroundExample: View {
@Binding var color: Color
var body: some View {
    Rectangle()
        .fill(color)
}
}