User can change the background color applied across multiple screens

App Development
1

I am trying to use the color picker extension in a reference file and export the picked color to apply to a struct which is then referenced in other screens as the background color. I can’t figure out how to properly get the color function to work. The struct that is being exported and referenced in other screens is backgmain. I am referencing it as backgmain() , and that is working. I am trying to export the value picked from the color picker at the bottom in place of the .blue foreground color for the rectangle. The color picker will also be referenced in another screen where i will have the settings. any help will be greatly appreciated. I have spent hours googling, but i just can’t figure it out.

// main background
struct backgmain:View{
    var body:some View{

        ZStack{
            Rectangle()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .foregroundColor(.blue)
                .ignoresSafeArea()
            Circle()
                .scale(1.98)
                .foregroundColor(.white.opacity(0.8))
         
        }
    }
}

struct bgcolorpick: View {
    @State var bgColor = Color.red
    var body: some View {
        VStack { 
            ColorPicker("Background", selection: $bgColor, supportsOpacity: false)
        }
    }
}```