截图

Screenshot 组件可渲染支持主题感知的图片，当用户切换网站主题时，该组件会自动在浅色和深色变体之间切换。每当您需要展示与读者当前配色方案相匹配的 UI 截图时，请使用此组件。

属性参考

属性	类型	是否必填	描述
`light`	`string`	否	浅色模式图片的路径
`dark`	`string`	否	深色模式图片的路径
`alt`	`string`	是	用于无障碍访问的替代文本
`width`	`number`	否	图片宽度（像素）
`height`	`number`	否	图片高度（像素）

双模式（浅色 + 深色）

同时提供 light 和 dark 属性，即可为每种主题显示对应的变体。切换右上角的主题选择器，即可看到图片发生切换。

import Screenshot from '@f5-sales-demo/docs-theme/components/Screenshot.astro';

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage"
/>

单图模式

当只有一种变体可用时，只需传入 light 或 dark 其中一个属性即可。该图片将在两种主题下均正常渲染，不会发生切换。

<Screenshot
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage (dark only)"
/>

指定尺寸

使用 width 和 height 属性来控制渲染尺寸，防止布局抖动。

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage at fixed width"
  width={600}
  height={338}
/>

工作原理

该组件在 .screenshot-pair 容器内渲染一个或两个 <img> 元素。CSS 规则根据当前激活的主题来切换图片的可见性：

深色模式（默认）—— .screenshot-light 图片通过 :root:not([data-theme="light"]) .screenshot-light \{ display: none \} 隐藏
浅色模式 —— .screenshot-dark 图片通过 :root[data-theme="light"] .screenshot-dark \{ display: none \} 隐藏

额外的选择器通过 :has() 处理 starlight-image-zoom 包装器，确保缩放功能在两种变体下均能正常工作。

所有截图图片均采用统一样式：细微边框、圆角以及悬停时加深的投影效果。

与 Markdown 图片的对比

功能	`Screenshot` 组件	Markdown `![](url)`
主题感知切换	支持	不支持
样式化边框与阴影	自动应用	不支持
悬停阴影效果	支持	不支持
缩放支持	与图片缩放插件兼容	与图片缩放插件兼容
替代文本	`alt` 属性	`![alt text]()`

当您拥有特定主题的图片变体，或希望呈现样式化的截图效果时，请使用 Screenshot 组件。对于内联图形、图表或在两种主题下外观相同的图片，请使用标准 Markdown 图片语法。