Black text on white button on iOS 18 Accented Home Screen Widget

Question

DavidXcode OP

Created Sep ’24

Replies 1

Boosts 3

Participants 2

Hi.

I am making my widgets ready for iOS 18 accented Home Screen widgets.

I am having issues setting the color of text to black. This is required as I have a white button with black text and black icon. I have tried manually, without using my Color, to set the text to .black or .white. It will always be white.

When applying the accent, I can use the .widgetAccentedRenderingMode(.fullColor) to turn the icon black, but I cannot do this for the text.

Button(intent:  --intent--) {
                HStack(alignment: .center) {
                    
                    Text("Play")
                        .font(.system(size: 12, weight: .bold))
                        .foregroundStyle(Color("buttonAccentColor")) // Problem here, this is forced to be white, I want it to be black
                    
                    Image("resume")
                        .renderingMode(.template)
                        .resizable()
                        .widgetAccentedRenderingMode(.fullColor) // This works
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 16, height: 16)
                        .foregroundStyle(Color("buttonAccentColor"))
                }
                .padding(8)
                .padding(.horizontal, 8)
            }
            .buttonStyle(.plain)
            .background(Color("neutral100"))
            .clipShape(Capsule())

Boost

Answer 1

tkerridge OP

Oct ’24

I'm seeing similar issues, I can't get general colours to be forced to be what I want, even when just wanting black vs white... It's changing gradients and backgrounds of images that are expecting black always, so that content on top can be white and visible, but instead get forced white meaning it's not visible...

I thought I could get away with using something like widgetAccentable(false) but it doesn't do anything:

// this gets forced white...
Color.black
    // this does nothing
    .widgetAccentable(false)
    .overlay(
        Image(uiImage: image)
            .resizable()
            .widgetAccentedRenderingMode(.fullColor)
            .aspectRatio(contentMode: .fit)
            .clipped()
            .padding(padding)
    )

0