Color / Gradient

Use color names, hexadecimal colors, or { r, g, b, a } objects. RGB components and opacity range from 0 to 1; clear is transparent. $env.foreground and $env.accent provide ordinary colors that follow the theme.

HDR(color) adds an HDR tag to a color string. Explicit ordinary colors remain SDR: for example, color={$env.foreground} is not enhanced automatically. Use color={HDR($env.foreground)} when you want enhancement. The table below describes omitted colors.

When a drawing color is omitted, the following defaults carry HDR tags.

Container backgrounds remain transparent. Original images, maps and system materials keep their own colors and rendering. Explicit ordinary colors, gradient stops and symbol palettes are not converted to HDR as a whole; tag each color you want to enhance.

An HDR tag does not guarantee brightness. Enhancement requires iOS 26 or later, a supported display, HUD mode and HDR enhancement enabled. The current display environment also affects the result. Ordinary dashboard mode, editor previews and exported PNGs use the standard display range; a preview image cannot demonstrate the brightness of a supported device.

The three lines below respectively omit the color, set an ordinary color explicitly and mark a color as HDR explicitly. They may look the same in a preview; enhancement appears in a supported HUD environment.

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 changes along a straight line, RadialGradient spreads out from the center, and AngularGradient changes angularly around the center. When constructing, you can pass a color array or a color array with color and location. Use 0–1 for color patch location and center coordinates, points for radial radius, and degrees for angles.

The created gradient can be passed to background, stroke and other attributes that support Paint. Attributes that only accept Color still need to use single color. The specific available types are subject to the attribute definition.

Linear background, radial fill, angular stroke and HDR text are shown below respectively.

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>
  );
}