CODEWITHSUNDEEP
ioswidgetswiftuibackground-color
Ahmadreza
Ahmadreza

Reputation: 7212

Can't change the iOS14 widget background color

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

Upvotes: 17

Views: 14408

Answers (5)

Pytan
Pytan

Reputation: 1674

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

Upvotes: 9

Asperi
Asperi

Reputation: 257693

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

Upvotes: 43

choofie
choofie

Reputation: 2863

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

Upvotes: 22

Matias Contreras
Matias Contreras

Reputation: 500

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

Upvotes: 6

shtnkgm
shtnkgm

Reputation: 1486

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

Upvotes: 6

Related Questions