Search code examples
swiftwatchkitapple-watch-complication

How set white color text in Modular Large Complication?

I can't set white text color for body1TextProvider and body2TextProvider. Only grey color available.

My code:

let modularLarge = CLKComplicationTemplateModularLargeStandardBody()
modularLarge.headerTextProvider = CLKSimpleTextProvider(text: dateText.capitalized)
modularLarge.headerTextProvider.tintColor = self.tintColor

modularLarge.body1TextProvider = CLKSimpleTextProvider(text: timeText)
modularLarge.body2TextProvider = CLKSimpleTextProvider(text: "00:00")

modularLarge.body1TextProvider.tintColor = self.whiteColor
modularLarge.body2TextProvider?.tintColor = self.whiteColor

handler(CLKComplicationTimelineEntry(date: Date(),complicationTemplate: modularLarge))

enter image description here

Solution

  • Looks to me as though there is either a bug, or some undocumented nuance to applying tintColor on CLKSimpleTextProvider.

    As per documentation on CLKSimpleTextProvider's tintColor:

    tintColor

    The tint color to use for text.

    Discussion

    On clock faces that support custom colors, this color is applied to the text in your text provider.

    Ref: https://developer.apple.com/documentation/clockkit/clktextprovider/1627929-tintcolor

    Now... after choosing the multi-color Modular watch face, we can observe that the headerTextProvider.tintColor works as documented and does apply the specified UIColor.
    but...
    body1TextProvider.tintColor and body2TextProvider?.tintColor does not work as documented as it does not apply the given UIColor.
    Showing us that the documented behavior is not applied uniformly across all textProviders.

    However...

    I noticed that if you set the CLKComplicationTemplate's tintColor to something, then body1TextProvider and body2TextProvider become white, even if you're trying to set another color like blue/yellow/etc.

    Luckily, you want it white so simply modularLarge.tintColor = .red (or a UIColor matching your theme) will get you your white body texts.

    Summary:

    No need to do the following (remove/keep, doesn't matter):

    modularLarge.body1TextProvider.tintColor = self.whiteColor
modularLarge.body2TextProvider?.tintColor = self.whiteColor

    Instead, do this before calling handler:

    modularLarge.tintColor = UIColor.red

    Solution:

    let modularLarge = CLKComplicationTemplateModularLargeStandardBody()    
modularLarge.tintColor = .red //do this

modularLarge.headerTextProvider = CLKSimpleTextProvider(text: dateText.capitalized)
modularLarge.headerTextProvider.tintColor = self.tintColor

modularLarge.body1TextProvider = CLKSimpleTextProvider(text: timeText)
modularLarge.body2TextProvider = CLKSimpleTextProvider(text: "00:00")

handler(CLKComplicationTimelineEntry(date: Date(),complicationTemplate: modularLarge))