I am building a cornerAccessory Widget / complication for a WatchOS app.

It turns out that different watch faces seems to enforce different design-rules, and what looks good on one watch face does not work on another.

This code creates an image with two colors. On one watch-face it looks good, on another details go missing.

struct CornerWidgetView: View {
  var entry: Provider.Entry

  private let size: CGFloat = 34

  var body: some View {
    ZStack {
      AccessoryWidgetBackground()
          .containerBackground(.clear, for: .widget)

      Image(systemName: "sos.circle.fill")
          .font(.system(size: 16))
          .foregroundStyle(.red, .white)
    }
    .frame(width: size, height: size)
    .contentShape(Circle())
      .background(Color.clear)
  }
}

"Activity Analogue" Watch Face - I can add images, SFSymbols can have multiple colors, works generally well.

"Metropolitan" Watch Face - SF Symbols only work with 1 color. Images are flattened into a flat color.

Is there a way to recognize which style of watch face I am on right now, to be able to have a more detailed widget when possible, and define a less detailed one for the limited faces?

Alternatively, are there any good sources explaining this better, and how to better control how the widget looks?

This is not limited to custom corner widgets. Selecting the shortcuts widget, for examples, also shows a simplified version of it on the simplified watch face.

I am building a cornerAccessory Widget / complication for a WatchOS app.

It turns out that different watch faces seems to enforce different design-rules, and what looks good on one watch face does not work on another.

This code creates an image with two colors. On one watch-face it looks good, on another details go missing.

struct CornerWidgetView: View {
  var entry: Provider.Entry

  private let size: CGFloat = 34

  var body: some View {
    ZStack {
      AccessoryWidgetBackground()
          .containerBackground(.clear, for: .widget)

      Image(systemName: "sos.circle.fill")
          .font(.system(size: 16))
          .foregroundStyle(.red, .white)
    }
    .frame(width: size, height: size)
    .contentShape(Circle())
      .background(Color.clear)
  }
}

"Activity Analogue" Watch Face - I can add images, SFSymbols can have multiple colors, works generally well.

"Metropolitan" Watch Face - SF Symbols only work with 1 color. Images are flattened into a flat color.

Is there a way to recognize which style of watch face I am on right now, to be able to have a more detailed widget when possible, and define a less detailed one for the limited faces?

Alternatively, are there any good sources explaining this better, and how to better control how the widget looks?

This is not limited to custom corner widgets. Selecting the shortcuts widget, for examples, also shows a simplified version of it on the simplified watch face.

• swiftui
• widget
• watchos
• widgetkit
• apple-watch-complication

1 Answer 1

I think you will also have problems on the Analogue Activity face if some chooses to change the colour of that face. It will only be fine if Multicolour is chosen.

However, you can use the modifier .symbolRenderingMode(.hierarchical) on the Image. This will allow the system to use different opacities for each part or layer of the symbol. See Apple Developer for full details https://developer.apple/documentation/swiftui/symbolrenderingmode.

I've tested your code again using this modifier and the outcome on the Metropolitan face was as follows.

struct ComplicationTestEntryView : View {
  var entry: Provider.Entry

  private let size: CGFloat = 34

  var body: some View {
    ZStack {
      AccessoryWidgetBackground()
          .containerBackground(.clear, for: .widget)

      Image(systemName: "sos.circle.fill")
          .font(.system(size: 16))
          .symbolRenderingMode(.hierarchical)
          .foregroundStyle(.red, .white)
          
    }
    .frame(width: size, height: size)
    .contentShape(Circle())
      .background(Color.clear)
  }
}

Hope that helps.