暗色模式图像实现指南 - 使用 picture 元素和 CSS 进行切换
暗色模式与图像挑战 - 为什么需要图像适配
暗色模式已成为现代 Web 设计的标配。然而，简单地切换背景色和文字色并不够 - 图像在暗色背景上的表现往往需要特别处理。白色背景的截图在暗色界面中显得刺眼，浅色图表在深色背景上对比度不足，带有白色边缘的 PNG 图标与暗色背景产生明显的违和感。
需要图像适配的典型场景：带白色背景的产品图片、UI 截图和教程图片、图表和信息图、带透明背景但颜色不适合暗色模式的图标、以及包含文字的装饰性图像。
解决方案的选择取决于图像类型：位图图像（照片、截图）通常需要准备两套版本；SVG 和图标可以通过 CSS 动态调整颜色；而某些图像只需要调整亮度或添加边框就能在两种模式下正常显示。
使用 picture 元素切换图像 - 纯 HTML 实现
<picture> 元素的 <source> 标签支持 media 属性，可以根据用户的颜色方案偏好加载不同的图像文件。这是最可靠的方法，不依赖 JavaScript。
基本用法：<picture><source srcset="diagram-dark.png" media="(prefers-color-scheme: dark)"><img src="diagram-light.png" alt="架构图"></picture>
这种方法的优势：浏览器只下载匹配当前模式的图像（节省带宽）、不需要 JavaScript、支持所有现代浏览器、可以与 srcset/sizes 结合实现响应式 + 暗色模式的双重适配。
与响应式图像结合：可以在每个 <source> 中同时指定 media（颜色方案）和 srcset（分辨率），实现根据设备像素比和颜色模式同时选择最佳图像。
注意事项：需要为每张图像准备两个版本，增加了资源管理的复杂度。对于大量图像的网站，应建立自动化的暗色版本生成流程。
CSS 暗色模式图像适配 - 使用滤镜和变量
CSS 提供了多种无需准备额外图像文件即可适配暗色模式的方法。
亮度和对比度调整：对于照片类图像，在暗色模式下略微降低亮度可以减少刺眼感：@media (prefers-color-scheme: dark) { img { filter: brightness(0.85); } }
反色滤镜：对于黑白图表或线条图，完全反转颜色效果很好：.diagram { filter: invert(1) hue-rotate(180deg); }。hue-rotate(180deg) 修正反色后的色相偏移，使彩色元素保持原有色调。
背景图像切换：使用 CSS 自定义属性切换背景图像 URL：:root { --hero-bg: url('hero-light.jpg'); }，在暗色模式中覆盖为暗色版本。
mix-blend-mode：对于叠加在背景上的装饰性图像，mix-blend-mode: difference 或 multiply 可以让图像自动适应背景色变化。
CSS 方法的局限性：滤镜会影响图像中的所有颜色，可能产生不自然的效果。对于需要精确控制的场景（如品牌色不能改变），仍需准备独立的暗色版本。
SVG 暗色模式适配 - 使用 currentColor 动态变色
SVG 是暗色模式适配最灵活的图像格式，因为其颜色可以通过 CSS 完全控制。
currentColor 关键字：将 SVG 的 fill 或 stroke 设置为 currentColor，SVG 会自动继承父元素的文字颜色。当暗色模式切换文字颜色时，SVG 图标自动跟随变化。
CSS 变量在 SVG 中的使用：内联 SVG 可以直接使用 CSS 自定义属性：<circle fill="var(--color-primary)" />。暗色模式切换变量值时，SVG 颜色自动更新。
外部 SVG 文件的处理：通过 <img> 引用的外部 SVG 无法被 CSS 样式化。解决方案：使用内联 SVG、通过 <use> 引用 SVG sprite、或使用 CSS mask-image 将 SVG 作为遮罩并用背景色填充。
mask-image 技巧：.icon { mask-image: url('icon.svg'); background-color: currentColor; }。这样 SVG 的形状作为遮罩，颜色完全由 CSS 控制，完美支持暗色模式切换。
截图和图表 - 实用的暗色模式工作流
技术文档和教程中大量使用的截图和图表是暗色模式适配的重点难题。
截图处理策略：最佳方案是在截图时就准备两个版本（在亮色和暗色系统设置下分别截图）。如果只有亮色版本，可以添加圆角边框和轻微阴影使其在暗色背景上不那么突兀：.screenshot { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
图表适配：使用 CSS 变量定义图表颜色，暗色模式时自动切换。对于使用 Chart.js 或 D3.js 等库生成的图表，监听 prefers-color-scheme 变化并重新渲染。对于静态图表图像，准备两个版本或使用 CSS 反色滤镜。
代码截图：代码高亮通常已有亮色和暗色主题。确保代码块的背景色和文字色都跟随系统主题切换。使用 CSS 变量定义代码块的配色方案。
自动化工作流：对于大量截图的文档站点，建立自动化流程：使用 Puppeteer 在两种模式下自动截图、使用 ImageMagick 批量为截图添加边框和阴影、构建时根据文件命名约定（如 *-dark.png）自动生成 picture 元素。
性能与无障碍注意事项
暗色模式图像适配不应以牺牲性能或无障碍性为代价。
性能优化：
- 使用
<picture>元素确保浏览器只下载当前模式需要的图像，避免预加载两套图像 - 对于 CSS 滤镜方案，
filter属性会触发合成层创建，大量使用可能影响滚动性能。对非视口内的图像使用content-visibility: auto延迟渲染 - SVG 内联会增加 HTML 文档大小。对于重复使用的图标，使用 SVG sprite +
<use>减少重复代码
无障碍考虑：
- 确保两种模式下图像的 alt 文本都准确描述内容
- 不要仅依赖颜色传达信息 - 图表应同时使用形状、图案或标签
- 暗色模式下的图像对比度同样需要满足 WCAG 标准
- 提供手动切换暗色模式的选项，不要仅依赖系统设置
过渡动画：模式切换时为图像添加平滑过渡：img { transition: filter 0.3s ease; }。避免突兀的颜色跳变影响用户体验。但注意尊重 prefers-reduced-motion 设置。