显示环境 $env

$env 描述“这张卡片现在怎样显示”，不包含车辆读数。需要根据尺寸、明暗主题或 HUD 改变布局时，从这里读取。

字段	类型	用途
width	数字，逻辑点	当前可用绘图宽度
height	数字，逻辑点	当前可用绘图高度
dark	布尔值	是否使用深色外观
foreground	颜色字符串	适合当前外观的前景色
accent	颜色字符串	建议的强调色
mode	"instruments" 或 "hud"	仪表模式或 HUD 模式
reduceMotion	布尔值	系统是否开启减弱动态效果

尺寸是点，不是像素

不要把 width 乘以手机的屏幕缩放倍数。x/y、字号、描边、地图偏移等使用相同的逻辑点单位。

function main() {
  const diameter = Math.max(0, Math.min($env.width, $env.height) - 36);
  return <Circle width={diameter} height={diameter}
    fill="clear" stroke={$env.accent} lineWidth={3}/>;
}

小卡片、横屏和不同容器会提供不同尺寸。普通节点里的 "fill" 表示填充当前父容器提议的尺寸，未必是整个屏幕。

跟随主题

const primary = $env.foreground;
const accent = $env.accent;
const secondary = $env.dark ? '#FFFFFF99' : '#12171C99';

建议先使用环境颜色，再为特定内容增加少量固定颜色。把黑色文字写死在透明背景上，在深色模式里很容易看不清。

根据展示方式调整内容

function main() {
  const hud = $env.mode === 'hud';
  return <Text fontSize={hud ? 72 : 56}
    fontWeight={hud ? 'semibold' : 'light'}
    color={$env.foreground}>
    {$data.current.speed === null ? '—' : Math.round($data.current.speed)}
  </Text>;
}

mode 表示展示方式，不等于 HDR 是否开启。没有 $env.hdr 或 $env.preview 这样的公开字段；不要依赖它们判断增强亮度或预览状态。

减弱动态效果

原生动画会遵循减弱动态效果。若自己的计算也需要区别处理，可读取 reduceMotion，例如在低动态设计中减少装饰元素或降低视觉变化。

静态缩略图与减弱动态效果场景会显示普通属性值，因此为每个动画节点设置合理的基础值很重要。