Button.background(Color) under the Light Appearance

I'm trying to set the background color of a button with label like the following for a macOS application. I haven't run it for iOS.

VStack(spacing: 20) {
    HStack(spacing: 32) {
        Button {
            showGuide.toggle()
        } label: {
            Text("Hello")
                .font(.title3)
                .frame(width: 190, height: 36)
        }
        .foregroundStyle(.primary)
        .background(.yellow)
        .clipShape(.capsule)
        .shadow(color: .red, radius: 8)
        
        Button {
            
        } label: {
            Text("Good morning")
                .font(.title3)
                .frame(width: 190, height: 36)
        }
        .foregroundStyle(.primary)
        .background(.pink)
        .clipShape(.capsule)
        .shadow(color: .red, radius: 8)
    }
}
.frame(maxWidth: .infinity, alignment: .center)

Interestingly, those two buttons have a white background color under the light appearance as shown below.

And it will get the designated background color under the dark appearance as shown below.

So why don't I get the buttons colored under the light appearance? I can't figure out why it happens. Does anybody know why? Thanks.