深色模式截图

深色模式截图是在操作系统、浏览器或应用启用深色模式时截取的画面，展示界面的深色主题版本。

Related workflow terms: 响应式截图, 截图对比.

深色模式截图为何重要

深色模式已经不是少数人的偏好。主流操作系统、浏览器和应用大多提供深色主题，相当一部分用户会一直保持开启。如果文档、营销素材或应用商店页面只展示浅色模式截图，就无法准确反映深色模式用户看到的体验。

对产品团队来说，同时截取两种模式，能让视觉文档与不同用户实际看到的画面一致。营销素材展示深色版本，也有助于向特别关注深色模式支持的用户说明产品能力。QA 同时比较两种模式，还能发现对比度不足、主题变量遗漏和元素未能随主题变化等只在某个版本中出现的问题。

深色模式也与无障碍体验有关。一些用户依靠深色主题减轻眼睛疲劳、应对光线敏感，或在昏暗环境中更舒适地工作。只展示浅色版本的截图，可能无法准确反映这些用户依赖的使用体验。

同时截取两种模式

手动截取浅色和深色版本，需要切换系统或应用主题，等待界面刷新，再截一次。只有一个页面时尚可，但产品包含数十个页面时，工作量会直接翻倍。

自动截图流程可以在渲染每个页面前，把 prefers-color-scheme 媒体特性设为 light 或 dark。同一 URL 一次运行即可生成两种版本，不用手动切换，也不会漏掉页面。最终得到的两张截图视口尺寸和滚动位置相同，只有配色方案不同。

在实际文档流程中，团队通常先截取浅色模式，再用完全相同的模板运行深色模式。固定视口、裁剪范围和文件命名方式，能让两张图片更容易检查，UI 更新后也更方便重新生成。

准备两种模式的截图时，应让以下条件保持一致：

• 视口尺寸——使用相同的宽度和高度，避免布局在两种模式之间偏移。
• 内容状态——使用相同数据、滚动位置，以及相同的展开或折叠状态。
• 字体渲染——有些主题会针对深色背景调整字重，应确认文字在两个版本中都清晰可读。

深色模式与可读性

深色模式会带来浅色模式截图中不明显的可读性问题。由于子像素渲染存在差异，深色背景上的白色或浅色文字可能显得更细。发丝线边框、轻微阴影和禁用状态元素等细节，在深色背景上也可能不如浅色背景明显。

把深色截图放进浅色背景的文档或网页时，图片与周围内容的反差可能过强。白色页面上的深色截图容易让视线停在边缘，而不是画面内容。为截图添加细边框、圆角或投影，可以把图片与页面分隔开，让整体排版更自然。

反过来，在深色主题的网页或演示文稿中嵌入浅色截图，也会产生同样的不协调。让截图主题与展示环境保持一致，效果会更整洁。

常见问题

• 文档只展示一种模式。 如果产品支持深色模式，只显示浅色模式的文档并不完整。使用深色模式的用户可能认不出自己日常看到的界面。
• 忘记检查对比度。 深色主题中文字与背景的对比度可能不足，辅助文字和禁用元素尤其如此。应按图片实际显示的分辨率，检查截图内文字是否清晰。
• 截图条件不一致。 浅色和深色模式使用不同视口尺寸，会让两张图片无法并排比较。切换模式前应固定视口尺寸和内容状态。
• 嵌入深色截图时没有视觉边界。 深色截图直接放在白色页面上，没有边框或阴影，会显得悬在页面中。添加适当的视觉边框，可以让图片稳定地融入版面。