概要

SwiftUIで画像を扱うときrenderingMode(_:)に.templateを設定したときに何が変化するのか気になりました。
調べてみます。

環境

macOS Big Sur 11.6
Xcode 13.1

公式の説明

意訳したものを添付します。

.originalと.templateの二つを設定できます。

.originalを設定した場合、元画像のまま表示されます。

.templateを設定した場合、画像の色を変更できます。

使ってみる

３つのサンプルを準備して試してみます。

何も設定しない
.originalを設定する
.templateを設定する

RenderingModePlayground.swift

struct RenderingModePlayground: View {
    var body: some View {
        HStack {
            Image(systemName: "person.crop.circle.badge.plus")
            Image(systemName: "person.crop.circle.badge.plus")
                .renderingMode(.original)
                .foregroundColor(.blue)
            Image(systemName: "person.crop.circle.badge.plus")
                .renderingMode(.template)
                .foregroundColor(.blue)
        }
        .font(.largeTitle)
    }
}

表示は以下のようになります。

公式の説明を確認してみる

何も設定しない場合

ライトモードではアイコンを黒色で表示する。
ダークモードではアイコンを白色で表示する。

`.original`を設定する場合

以下和訳

オリジナルのテンプレートレンダリングモードと青の前景色を使用して、マルチカラーの動作を実現しました。このモードでは、画像の特徴的な部分（ここではプラスのアイコン）の前景色がグラフィックで上書きされます。

「画像のプラスの箇所だけオリジナルの緑色が適用されて、それ以外はforegroundColorで設定した色で表示される」ということなのでしょう。

画像の特徴的な部分

ただ、この判定はどのように行われているのか疑問です。

`.template`を設定する場合

ダークモード・ライトモード変わらずforegroundColorで設定した色で表示されます。