iOS 26 の「クリア」表示で、ウィジェットが真っ白になった——WidgetRenderingMode の3つのモード
iPhone のホーム画面は、アイコンやウィジェットの見た目を変えられます。通常のカラーのほかに、全体を1色に寄せる「色合い調整」や、iOS 26 で加わった、ガラスのように透ける「クリア」があります。
Sheet Widget では、この「色合い調整」や「クリア」にしたときに、ウィジェットが真っ白に飛んで、表が読めなくなる問題がありました。
ウィジェットの表示モードは3種類ある
ウィジェットがどの見た目で表示されているかは、SwiftUI の環境値 widgetRenderingMode で分かります。
| モード | ホーム画面の設定 | 描かれ方 |
|---|---|---|
.fullColor |
通常 | 指定した色のまま |
.accented |
色合い調整 | 色が1色に置き換わる |
.vibrant |
iOS 26 の「クリア」など | 色が抜けて、明るさだけで描かれる |
Sheet Widget は、セルの背景色や文字色を、スプレッドシートの書式どおりに描いています。ところが .accented や .vibrant では、システムが色を1色に潰して描きます。セルやグラフの背景を塗っていると、背景も線も文字も同じ1色になって一枚の塗りになり、線も文字も見えなくなっていました。
最初の修正は、モードを1つ見落としていた
直し方は、通常の表示以外では背景を塗らないことです。最初の修正では、これを .accented(色合い調整)のときだけに入れていました。
if renderingMode == .accented {
// 背景を塗らない
}
これで「色合い調整」は直りましたが、iOS 26 の「クリア」(.vibrant)を見落としていて、こちらでは白飛びが残っていました。自分のホーム画面で「クリア」を試したときに気づきました。
修正:通常以外は、まとめて扱う
最終的には、「通常(.fullColor)以外」という条件に直して、両方をまとめて扱うようにしました。
@Environment(\.widgetRenderingMode) private var renderingMode
private var backgroundColor: Color {
if renderingMode != .fullColor { return .clear } // 通常以外は塗らない
return model.backgroundHex.map { Color(hex: $0) } ?? .white
}
モードを1つずつ書き並べると、今回のように新しいモードが増えたときに漏れます。「通常かどうか」で分けておけば、今後モードが増えても、通常以外はひとまず読める表示になります。
確認の仕方
ホーム画面の見た目は、ホーム画面の何もないところを長押し →「編集」→「カスタマイズ」から切り替えられます。ウィジェットを作ったら、次の3つで表示を確かめるようにしています。
- 通常(ライト・ダーク)
- 色合い調整
- クリア
色をたくさん使うウィジェットほど、通常以外の表示で崩れやすいので、色のある表やグラフを表示するアプリでは特に注意が必要です。
Sheet Widget は App Store で公開しています。