Button.background(Color) under the Light Appearance

Question

Created Aug ’24

Replies 1

Boosts 0

Participants 2

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.

Answered by DTS Engineer in 799004022

@Tomato Use colorScheme environment value to set the background color based on the device appearance.

Button {
} label: {
    Text("Hello")
        .font(.title3)
        .frame(width: 190, height: 36)
}
.background(colorScheme == .dark ? .red : .green)
.buttonStyle(.plain)

Boost

Answer 1

DTS Engineer OP

Apple

Aug ’24

Accepted Answer

Recommended

@Tomato Use colorScheme environment value to set the background color based on the device appearance.

Button {
} label: {
    Text("Hello")
        .font(.title3)
        .frame(width: 190, height: 36)
}
.background(colorScheme == .dark ? .red : .green)
.buttonStyle(.plain)

0