【iOS18】ウィジェットの色合い調整対応を解説

iOS18から「色合い調整」という機能が追加され、ホーム画面を長押しした後、画面左上にある編集ボタンを押し、

カスタマイズ > 色合い調整

を選ぶ事で、ホーム画面を好きな色合いに変更できるようになりました。

このため、色合い調整に対応していないウィジェットは真っ白に表示される悲劇が起こっています。

この記事では、真っ白になったウィジェットをどう色合い調整に対応していけばいいのかを解説します。

Contents

色味をベタ反映

ユーザはホーム画面の色合いを好きな色に変更できるので、色合い調整がONの場合にユーザーが指定した色をそのまま反映したい場合は、次のモディファイアを指定すればOKです。

.widgetAccentable()

ベタ塗りのUI背景などに使うと良さそうですが、文字は真っ白にしているウィジェットが多いので、色合い調整がONかどうかを判定して、文字色を白にすると良さそうです。
背景と同じ色になったら見えなくなりますからね。

色合い調整がONかどうかは次の環境プロパティを宣言し

@Environment(\.widgetRenderingMode) var widgetRenderingMode

次の条件で判定できます。この判定式を使って文字色を白にしてください。
色合い調整ONの場合は、白以外の色指定は反映されないようです(たぶん)

widgetRenderingMode == .accented

ウィジェットに画像を使っていて、その模様を色合い調整ON状態でも表示させたい場合は次のモディファイアを指定すればOKです。

.widgetAccentedRenderingMode(.accentedDesaturated)

このモディファイアはiOS18以上からなので、iOS18未満を対象にしているアプリでは条件分岐をつけて適用してください。

参考に大手のウィジェットを色々みていると、ウィジェットの背景は真っ黒にしているアプリが多いです。

色味調整をONにするとアプリアイコンの背景が真っ黒になるのでウィジェットも黒い方が合うからだと思います。

ただ、背景色としてColor.blackを置いても黒くならなかったので、次のコードで代用しました。正しい方法をご存知の方、教えてください。

// 白黒表示にさせるモディファイアを適用する
Image("").widgetAccentedRenderingMode(.desaturated)

以上を適用すると、次のような表示になります。