WidgetKit Image becomes gray when widget is not primary / inactive

I’m working with WidgetKit for the first time.
My widget works as expected, but I’m facing an issue with how it renders when it’s not the primary widget.

My widget mainly displays a large image.
When the widget is active (primary), the image is displayed normally.
However, when the widget becomes inactive / secondary, the image automatically turns gray (looks dimmed or desaturated).

I didn’t apply any grayscale or opacity modifiers myself

Video

Code:

struct SimpleEntry: TimelineEntry { let date: Date let nowPlaying: NowPlayingData } struct LiqoriaWidgetEntryView : View { @Environment(\.widgetRenderingMode) var renderingMode @Environment(\.widgetFamily) var family //detech view size @State var should = false //does nothing for now var entry: SimpleEntry var body: some View { switch family { case .systemSmall: LiqoriaWidgetViewSmall(entry: entry) case .systemMedium: LiqoriaWidgetViewMedium(entry: entry) case .systemLarge: LiqoriaWidgetViewLarge(entry: entry) default: LiqoriaWidgetViewLarge(entry: entry) } } } struct LiqoriaWidget: Widget { let kind: String = "LiqoriaWidget" var body: some WidgetConfiguration { StaticConfiguration(kind: kind, provider: Provider()) { entry in LiqoriaWidgetEntryView(entry: entry) .containerBackground(.fill.tertiary, for: .widget) //.environment(\.widgetRenderingMode, .) .environment(\.colorScheme, .dark) .widgetAccentable(false) } .configurationDisplayName("Liqoria Widget") .description("Liqoria now playing widget") .supportedFamilies([.systemSmall, .systemMedium, .systemLarge]) } } //LargeView struct LiqoriaWidgetViewLarge : View { @State var should = false var entry: SimpleEntry let gradientMask = LinearGradient( gradient: Gradient(stops: [ .init(color: .black, location: 0.0), .init(color: .clear, location: 0.8) ]), startPoint: .bottom, endPoint: .top ) private var artworkImage: NSImage? { entry.nowPlaying.artworkImage } var body: some View { ZStack(alignment: .bottom) { Group { if let image = artworkImage { Image(nsImage: image) .interpolation(.low) .scaledToFill() .frame(width: 344, height: 344) //effect Rectangle() .fill(.thickMaterial) .brightness(0.1) .frame(width: 344, height: 344) .mask(gradientMask) Image(nsImage: image) .interpolation(.low) .scaledToFill() .frame(width: 344, height: 344) .blur(radius: 14) .clipped() .mask(gradientMask) } else { // Fallback Rectangle() .fill(.ultraThinMaterial) .frame(width: 344, height: 344) .clipped() .overlay( Image(systemName: "music.note") .font(.system(size: 60)) .foregroundColor(.white.opacity(0.5)) ) } } .opacity(entry.nowPlaying.isPlaying ? 0.9 : 0.3) LinearGradient( stops: [ .init(color: .black.opacity(0.5), location: 0), .init(color: .clear, location: 0.8) ], startPoint: .bottom, endPoint: .top ) //Song name + artists VStack(alignment: .center) { HStack { VStack(alignment: .leading, spacing: 0) { Text(entry.nowPlaying.songName) .foregroundStyle(.ultraThinMaterial) .brightness(0.6) .font(.title2) .fontWeight(.semibold) .lineLimit(1) .shadow(color: .black.opacity(0.1), radius: 1, y: 1) Text(entry.nowPlaying.artistName) .foregroundStyle(.ultraThinMaterial) .font(.body) .lineLimit(1) .opacity(0.6) .brightness(0.4) } .frame(maxWidth: .infinity, alignment: .leading) //Like button LikeCircleButtonWidget(isOn: entry.nowPlaying.isFavorite) { } .padding(.trailing, 5) } .frame(maxWidth: .infinity, alignment: .leading) buttonsUI() .padding(.top) } .padding(.horizontal, 24) .padding(.bottom, 24) } } }