Can't change the iOS14 widget background color

user_6449292 0
Viewed 8302

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:

enter image description here

swiftui background-color widget ios
4 Answers

You need to specify full frame, as on below demo

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

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"

enter image description here

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

enter image description here

  1. 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"))
    }
}
  1. Compile and Run on device (or Simulator) and check the color updates to the current appearance

enter image description here enter image description here

user_53662050

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.

enter image description here

user_72858190

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")
        }
    }
user_14899920
Related