> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/control/image/template-image.md).

# template image

[SwiftUI](/ios/swiftui.md) ⟩ [control](/ios/swiftui/control.md) ⟩ [Image](/ios/swiftui/control/image.md) ⟩ template image 

{% hint style="info" %}
一般的圖片會保留其原始的色彩，無論[前景色](/ios/swiftui/view/drawing/foreground/style/view.foregroundstyle.md)如何變化，圖片的<mark style="color:yellow;">顏色都</mark><mark style="color:red;">不會</mark><mark style="color:yellow;">改變</mark>。而 *<mark style="color:purple;">**template images**</mark>* 則不同，它們是<mark style="color:yellow;">只有輪廓的圖片</mark>，其<mark style="color:yellow;">顏色</mark><mark style="color:green;">會</mark><mark style="color:yellow;">受到前景色設定的影響</mark>。

```swift
// ⭐️ 將一般圖片設為 template image
Image("heart").renderingMode(.template)
```

它們<mark style="color:yellow;">支援動態色彩</mark>變更，圖片的外觀會根據環境自動調整，如：深色模式(dark mode)和淺色模式(light mode)。
{% endhint %}

<figure><img src="/files/w5ulMC0CfJrYanYXEK5o" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="👥 相關" %}

* [SF Symbols](/ios/swiftui/control/image/sf-symbols.md)：天生就是 *<mark style="color:purple;">**template image**</mark>*。
  {% endtab %}

{% tab title="💾 程式" %}

```swift
          
// 1. 紅色的愛心
//    foregroundColor() 設定不影響圖片顏色，愛心仍然是原來的顏色
image(color: .blue)

// 2. ⭐️ 設為 template image (愛心變藍色)
image(color: .blue, template: true)

// 3. ⭐️ SF Symbols 天生就是 template image
Image(systemName: "heart.fill")
    // .font(.system(size: 150))    // frame 會超過 150
    .resizable()
    .scaledToFit()
    .frame(height: 150)
    .foregroundColor(.green)
    .border(.yellow)

// private method
func image(color: Color, template: Bool = false) -> some View {

    Image("heart")
    
        // ⭐️ 設為 template image ?
        .renderingMode(template ? .template : .original)
    
        .resizable()
        .scaledToFit()
        .frame(width: 150, height: 150)
    
        .foregroundColor(color) // 這個設定會讓愛心變成藍色
        .border(.yellow)
}
```

{% endtab %}

{% tab title="📘 手冊" %}
\*
{% endtab %}

{% tab title="📗 參考" %}

* Gemini ⟩ [什麼是 template image？](https://g.co/gemini/share/cb92a11f392b)&#x20;
  {% endtab %}
  {% endtabs %}