Displaying playing card suits in dark or light modes

Question

Following Apple's guidelines I'm using SF_symbols to represent playing cards in my SwiftUI iOS app. The hearts and diamond suits are traditionaly red, but the clubs and spades suits are black. This statement:

Text(Image(systemName: "suit.spade"))
Text(Image(systemName: "suit.heart"))

would ideally display the cards in their colours adjusting to dark mode as need be. Black/red in light mode and white/red in dark mode. However I can't determine which modifier to achieve this effect and I want to avoid custom algorithms to avoid clashes when users use their own non-standard palettes.

I have tried the modifier .symbolRenderingMode with different modifiers but this doesn't solve the problem.

• .multicolor which displays correctly in light mode, but spades are displayed black on a black background in dark mode, which is not very accessible.
• .monochrome but hearts are not displayed red.

Since Apple delivers the suit symbols multicoloured I'm optimistic I can rely on their algorithms without me having to code a work-around.

(as an aside, I'd prefer 4 colours as this is regarded as the most accessible mode for poor eyesight, helping distinguish clubs from spades, but I'd settle for two colors if Apple offered this as standard and it supported dark mode)

*** Update: @HangarRash 's solution is correct, but the Xcode preview does not reflect this as you can see in the screenshot

Answer 1

The following gives a black spade in light mode and a white spade in dark mode. And the heart is an appropriate shade of red for the given mode.

Text(Image(systemName: "suit.spade").symbolRenderingMode(.multicolor))
Text(Image(systemName: "suit.heart").symbolRenderingMode(.multicolor))

The ".fill" version of each symbol works as well.

Note that Xcode does not properly show this in the preview. See the correct results by running the app in an iOS simulator or a real device.