iOS 18 Widget Tint Detection

Question

Created Jun ’24

Replies 3

Boosts 0

Views 2.5k

Participants 5

With iOS 18, when you tint Home Screen, the widgets also need to pick up the tint. How do you detect this within SwiftUI?

I didn't see WWDC24 sessions addressing this.

Answered by jcgoforth in 793113022

It isn’t covered because it isn‘t a new mode. It is just new to the Home Screen. The answer to your question depends on which thing you are referring to.

if you need to know in your code that you are in the tinted mode, to choose a different image for instance, you can check the widgetRenderingMode environment variable

when it is in the tinted mode, this should be accented

if you are specifically asking about how to color something in the accent color, you just need to add the widgetAccentable() modifier to what ever view you want to take on the accent color

Boost

Answer 1

jcgoforth OP

Jun ’24

Accepted Answer

It isn’t covered because it isn‘t a new mode. It is just new to the Home Screen. The answer to your question depends on which thing you are referring to.

if you need to know in your code that you are in the tinted mode, to choose a different image for instance, you can check the widgetRenderingMode environment variable

when it is in the tinted mode, this should be accented

if you are specifically asking about how to color something in the accent color, you just need to add the widgetAccentable() modifier to what ever view you want to take on the accent color

1

Answer 2

siburb2 OP

Jul ’24

It isn't working like that for me. If I show the rendering mode (from the environment) in the widget, then it always shows "Full Color", never vibrant or accented.

It doesn't seem to reload the widget at all even when the rendering mode changes, but also stays "Full Color" even if the widget is explicitly reloaded whilst in tinted mode.

Logged as feedback: #14259967

1

Answer 3

Gregorianst OP

Sep ’24

You can use

@Environment(\.widgetRenderingMode) var widgetRenderingMode

...

button
.background(backgroundColor.opacity(widgetRenderingMode == .accented ? 0.5 : 1))

2