Can't change the iOS14 widget background color

Question

I know I can change the views background colors in SwiftUI with this code:

.background(Color(.systemGroupedBackground))

But I can't do it for widget background color itself!

I use this code:

struct XWidget: Widget { // MARK: Widget is defined here
    var body: some WidgetConfiguration {
        StaticConfiguration(
            kind: "xWidget",
            provider: xProvider(),
            placeholder: Text("Loading...")) { entry in
            xWidgetEntryView(entry: entry).background(Color(.systemGroupedBackground)) // <= here
        }.supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
    }
}

But the result is like this:

Answer 1

For those who are trying to change the widget background that supports both dark and light modes.

Change widget background color (supports dark mode)

1. Go to Assets.xcassets in your Widget Extension
2. There should be a Color Set already with name "WidgetBackground"
3. If it's missing, then create a new Color Set and name it as "WidgetBackground"
4. Go to the Attribute Inspector and make sure the Appearances is set to "Any, Dark"

5. Go to your Widget Extension's Build Settings and search for the Asset Catalog Compiler - Options
6. Make sure the Widget Background Color Name is set to the name of the Color Set "WidgetBackground"

7. Go to your widget view and set its background color .background(Color("WidgetBackground"))

public var body: some WidgetConfiguration {
    StaticConfiguration(kind: kind, provider: MyCustomTimeline()) { entry in
        MyCustomWidgetView(entry: entry)
            .background(Color("WidgetBackground"))
    }
}

8. Compile and Run on device (or Simulator) and check the color updates to the current appearance

Answer 2

You need to specify full frame, as on below demo

StaticConfiguration(
    kind: "xWidget",
    provider: xProvider(),
    placeholder: Text("Loading...")) { entry in
    xWidgetEntryView(entry: entry)
       .frame(maxWidth: .infinity, maxHeight: .infinity)    // << here !!
       .background(Color.green)
}.supportedFamilies([.systemSmall, .systemMedium, .systemLarge])

backup