For an Image
view acting as a label for a Button
& displaying an SFSymbol like below, I'd like it to display with black foreground style for light mode and white for dark mode. I tried setting .foregroundStyle(.primary)
but it doesn't work; the color of the icon stays blue. I know I could detect the light/dark colorScheme
and implement the logic manually or create a Color
in the asset catalog and use it but is there a way to automatically adapt Image just as Text
adapt to light & dark modes?
Button {
} label: {
Image(systemName: "play.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60)
}
You can simply create a colorset in the Assets.xcassets
and use it like this.
Button {
} label: {
Image(systemName: "play.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundStyle(Color("imageColor"))
.frame(width: 60, height: 60)
}