SwiftUI ColorPicker on macOS looks weird

Question

My ColorPicker looks fine on iPad/iPhone, with colored circles, but on macOS, the color is a rectangle that almost fills the screen width, but isn't even consistent. Using Xcode 12.4, Swift 5, mac catalyst, iOS target is 14.0. Here is the image:

and the code is just standard SwiftUI like this:

Section(header: Text("Region")) {
                        ColorPicker("Active region color", selection: Binding(
                                        get: { activeColor },
                                        set: { newValue in
                                            activeColorName = newValue.toString
                                            activeColor = newValue
                                        }))

                    }

Any way to make this look as pretty as the ColorPicker appearance on iOS devices? At least eliminate the ragged left margin? Almost makes me miss AutoLayout.

EDIT:

I ended up doing something like this:

Section(header: Text("Region")) {
                        HStack {
                            Text("Active region color")
                            Spacer()
                            ColorPicker("", selection: Binding(
                                            get: { activeColor },
                                            set: { newValue in
                                                activeColorName = newValue.toString
                                                activeColor = newValue
                                            }))
                                .frame(maxWidth: 500)
                        }
                    }

But I am surprised that this is necessary, and certainly this isn't as pretty as what you see running on an iDevice.

Answer 1

I was in the same situation and here is my workaround.

Inspired by this Answer

bgColor is the background color of your original view that this color picker will be placed on. In my case bgcolor is -> bgColor: Color(UIColor.secondarySystemBackground)

    struct CircleColorPickerView: View {
    
    var title : String
    @Binding var colorValue: Color
    var bgColor : Color
    
    var body: some View {
        
        let size : CGFloat = 25
        
        colorValue
            .frame(width: size, height: size, alignment: .center)
            .cornerRadius(size)
            .overlay(Circle().stroke(bgColor, style: StrokeStyle(lineWidth: 2)))
            .padding(4)
            .background(AngularGradient(gradient: Gradient(colors: [.red,.yellow,.green,.blue,.purple,.pink]), center:.center).cornerRadius(size))
            .overlay(ColorPicker(title, selection: $colorValue, supportsOpacity: false).labelsHidden().opacity(0.015))
            //.shadow(radius: 5.0)

    }
}

This works fine on both iOS and macOS. However, I want to keep original look and feel of ColorPicker in iOS so I use if condition to use this workaround when running on macOS only.

Hope this help.