Color / Gradient

วิธีการเขียนที่ใช้กันทั่วไป ได้แก่ ชื่อสี สีเลขฐานสิบหก และวัตถุ { 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 ไม่รับประกันความสว่างตามจริง การเพิ่มประสิทธิภาพต้องใช้ iOS 26 หรือใหม่กว่า หน้าจอที่รองรับ โหมด HUD และการเปิดการเพิ่มประสิทธิภาพ HDR ผลลัพธ์ที่แท้จริงยังได้รับผลกระทบจากสภาพแวดล้อมการแสดงผลในปัจจุบันด้วย โหมดเครื่องมือปกติ การแสดงตัวอย่างด้วยโปรแกรมแก้ไข และ PNG ที่ส่งออกจะใช้ช่วงการแสดงผลปกติ และไม่สามารถใช้การแสดงตัวอย่างเพื่อตัดสินเอฟเฟกต์ไฮไลต์จริงได้

บรรทัดสามบรรทัดต่อไปนี้ละเว้นสี ใช้สีปกติอย่างชัดเจน และทำเครื่องหมายสีไฮไลต์อย่างชัดเจน อาจดูเหมือนกันในหน้าตัวอย่าง แต่ความแตกต่างในการปรับปรุงจะปรากฏชัดเจนหลังจากเข้าสู่สภาพแวดล้อม HUD ที่รองรับ HDR

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 สำหรับตำแหน่งแพตช์สีและพิกัดกึ่งกลาง จุดสำหรับรัศมีรัศมี และองศาสำหรับมุม

การไล่ระดับสีที่สร้างขึ้นสามารถส่งผ่านไปยัง background, stroke และคุณลักษณะอื่นๆ ที่รองรับ Paint คุณลักษณะที่ยอมรับเฉพาะ 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>
  );
}