[iOS 18] Colors from asset catalog render as pure white on tinted widgets

When a widget uses a custom color from Assets catalog. Those colors seem to be ignored and rendered as pure white when used in a widget and the Home Screen is set into the Tinted mode.

This can be re-produced both in a Simulator and on a device and on the latest 18.1 beta (as of writing this post).

Occasionally, I was able to catch the widget to be rendered correctly after it had been on the Home Screen for some time, but I could not identify what caused it, just re-rendering the widget by pushing a new entry into the timeline or changing the configuration, does not help the issue, colors are still rendered white.

I've attached the screenshots with my widget rendered in tree different modes.

Has anyone also encountered this? I'm not sure if I need to do something extra to properly support tinted mode.

Answered by markdaws in 802654022

When you select tinted your widget is rendered in accented mode. Accented mode splits the UI elements into two groups, the default group and the accented group. Basically you only get two colors the accented group will get the tinted color the other group is white. You swap your UI elements between the groups using the widgetAccentable modifier: https://developer.apple.com/documentation/swiftui/view/widgetaccentable(_:)

You can still apply an opacity to the UI elements if you want. If you want them to be the original color then you can use the https://developer.apple.com/documentation/widgetkit/widgetaccentedrenderingmode property but that only applies to Image elements.

Accepted Answer

When you select tinted your widget is rendered in accented mode. Accented mode splits the UI elements into two groups, the default group and the accented group. Basically you only get two colors the accented group will get the tinted color the other group is white. You swap your UI elements between the groups using the widgetAccentable modifier: https://developer.apple.com/documentation/swiftui/view/widgetaccentable(_:)

You can still apply an opacity to the UI elements if you want. If you want them to be the original color then you can use the https://developer.apple.com/documentation/widgetkit/widgetaccentedrenderingmode property but that only applies to Image elements.

[iOS 18] Colors from asset catalog render as pure white on tinted widgets
 
 
Q