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:

Springy

Answer 1

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])

Nadabb

Thank you that worked. But how can I define to colors for day and dark mode? Can you also tell me how I can set an image instead of color? – Domiciliary

I use a combination of this and the WidgetBackround color assets, after defining the WIdgetBackground color for light and black, use Color("WidgetBackground") instead of Color.green in the code above. – Scandura

Answer 2

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

Sphalerite

Answer 3

You can also set a color within your widget view using a ZStack like so:

var body: some View {
        
       VStack {
            ZStack {
                Color.black
                    .ignoresSafeArea()
                Link(destination: Deeplink.image.url!) {
                    Image("exampleImage")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .padding(.vertical, 3)
                }
            }
            Text("Example text")
        }
    }

Feller

This seem the "most right". It's simple and logical. I'd perhaps swap the Z and V stacks, though, like: ZStack { Color.black.ignoresSafeArea() VStack { //widget content goes here } } – Rendon

Answer 4

If you want to change the background color of your widget, you should modify your Assets.xcassets.

The Assets.xcassets in the Widget target has a Color Set named "WidgetBackground".

Changing the "WidgetBackground" color not only changes the background color of your widget, but also the background color of the add button of the widget that appears in the Widget Library.

Berry

This didn't work for me. It changed the color of the button but the color of the widget is still same. Can you also show how to set 2 color for night and day? – Domiciliary

That's in the attributes inspector to the right; you can select the appearance (any, light, dark) – Eparchy

doesnt work... how do you set the canvas color? – Eggert

This doesn't seem to work. For some reason the build fails with Failed to find newest available Simulator runtime if set to anything else than "None" – Calyptrogen

Answer 5

In iOS 17+, containerBackground(_:for:) is available.

public var body: some WidgetConfiguration {
    StaticConfiguration(kind: kind, provider: MyCustomTimeline()) { entry in
        MyCustomWidgetView(entry: entry)
            .containerBackground(.red.tertiary, for: .widget)
    }
}

Handicapped