CapDriveColor / Gradient
為文字、背景和描邊提供顏色與漸層。Paint 可以是顏色，也可以是由漸層構造函式建立的值。
顏色
常用寫法包括顏色名稱、十六進制顏色，以及 { r, g, b, a } 物件。RGB 分量與透明度使用 0–1，clear 表示透明。$env.foreground 與 $env.accent 提供隨主題切換的普通顏色。
HDR(color) 為顏色字串添加 HDR 標記。顯式填寫的普通顏色保持 SDR；例如 color={$env.foreground} 不會自動增強，需要高亮時可寫成 color={HDR($env.foreground)}。省略顏色屬性時的預設行為見下表。
省略顏色時的 HDR 預設值
未指定繪制顏色時，以下預設顏色帶有 HDR 標記。
| 內容 | 省略時的顏色 |
|---|---|
| 文字、符號、模板圖片 | HDR($env.foreground)；符號使用調色板模式且已指定調色板時保留調色板顏色。 |
| 矩形、圓、橢圓、柱狀圖的填充 | HDR($env.dark ? 'white' : 'black')。 |
| 線條、圓弧、折線、路徑、折線圖的描邊 | HDR($env.dark ? 'white' : 'black')。 |
| 圖表坐標軸與標籤 | 預設使用 HDR 前景色。顯式設定圖表填充或描邊不會改變標籤的預設顏色。 |
| 已啓用的發光、內陰影、投影 | 效果省略顏色時，發光預設 HDR 白色，內陰影與投影預設 HDR 黑色；省略效果本身不會啓用它。 |
容器背景仍為透明。原色圖片、地圖和系統材質保留各自的顏色與顯示方式。顯式指定的普通顏色、漸變色標和符號調色板不會整體轉換為 HDR，需要增強的顏色應單獨標記。
增強何時生效
HDR 標記不保證實際亮度。增強需要 iOS 26 或更高版本、支持的屏幕、HUD 模式及開啓 HDR 增強；實際效果還受當前顯示環境影響。普通儀表模式、編輯器預覽和導出的 PNG 使用普通顯示範圍，不能用預覽圖判斷實機高亮效果。
下面三行分別省略顏色、顯式使用普通顏色、顯式標記高亮顏色。在預覽中可能看起來相同，進入支持 HDR 的 HUD 環境後才體現增強差異。
function main() {
return (
<VStack spacing={8}>
<Text fontSize={22}>Default HDR</Text>
<Text fontSize={22} color={$env.foreground}>
Explicit SDR
</Text>
<Text fontSize={22} color={HDR($env.accent)}>
Explicit HDR
</Text>
</VStack>
);
}
漸變
LinearGradient 沿直線方向變化，RadialGradient 從中心向外擴散，AngularGradient 圍繞中心按角度變化。構造時可傳顏色陣列，也可傳帶 color 和 location 的色標陣列。色標位置和中心坐標使用 0–1，徑向半徑使用點，角度使用度。
建立的漸變可傳給支持 Paint 的 background、stroke 等屬性。只接受 Color 的屬性仍需使用單色，具體可用類型以屬性定義為準。
示例：背景與描邊漸變
下面分別展示線性背景、徑向填充、角度描邊和 HDR 文字。
function main() {
return (
<VStack spacing={12}>
<Rectangle
height={48}
background={LinearGradient(['#B9E883', '#30B3A2'], { angle: 30 })}
/>
<Circle
width={100}
height={100}
background={RadialGradient(['white', '#30B3A2'])}
/>
<Circle
width={100}
height={100}
stroke={AngularGradient(['#B9E883', '#30B3A2', '#B9E883'])}
lineWidth={8}
background="clear"
/>
<Text color={HDR('white')}>CapDrive</Text>
</VStack>
);
}
構造函式
HDR(color: string) → HDRColor標記需要 HDR 增強的顏色，保留原始 SDR 顏色。
LinearGradient(colors: GradientColors, options?: LinearGradientOptions) → Gradient建立漸層筆刷，可直接呼叫或使用 new。
RadialGradient(colors: GradientColors, options?: RadialGradientOptions) → Gradient建立漸層筆刷，可直接呼叫或使用 new。
AngularGradient(colors: GradientColors, options?: AngularGradientOptions) → Gradient建立漸層筆刷，可直接呼叫或使用 new。