<picture> 不支持暗黑模式自动切换，因其不监听 prefers-color-scheme 变化，需在 <source> 的 media 属性中显式声明且按顺序匹配；暗黑源须置顶、写全媒体查询、指定 type，并确保图像语义与尺寸一致以避免布局抖动。
为什么 <picture> 本身不支持暗黑模式自动切换
因为 <picture> 是响应式图像容器，只响应视口尺寸、设备像素比、srcset 中的宽度描述符等静态条件，**不监听系统配色方案变化**。它没有内置对 prefers-color-scheme 媒体查询的支持——这个查询必须由外部 <source> 的 media 属性显式声明。
<source media="(prefers-color-scheme: dark)"> 必须放在最前面
浏览器按 <source> 顺序匹配第一个满足 media 条件的源。如果暗黑模式的 <source> 放在后面，而前面的 <source>（比如无 media 或宽泛匹配）已命中，就不会继续往下看。
正确写法示例：
<picture> <source media="(prefers-color-scheme: dark)" srcset="logo-dark.webp" type="image/webp"> <source media="(prefers-color-scheme: dark)" srcset="logo-dark.png" type="image/png"> <source srcset="logo-light.webp" type="image/webp"> <source srcset="logo-light.png" type="image/png"> <img src="logo-light.png" alt="Logo"> </picture>
-
media="(prefers-color-scheme: dark)"必须写全，不能简写为(dark)或dark - 每个
<source>应指定type，避免浏览器因 MIME 类型未知而跳过 - fallback
<img>的src应与最后一个未加media的<source>一致，确保降级可靠
暗黑图和亮色图必须语义等价且尺寸一致
换图不是换风格，而是适配可访问性与视觉一致性。如果暗黑版 logo 文字变粗、留白压缩、或宽高比不同，会导致布局抖动（layout shift），尤其在 SSR 或首屏渲染时明显。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 两张图用相同
width和height属性（或 CSSaspect-ratio）约束容器 - 避免仅靠 CSS 滤镜（如
filter: invert(1)）模拟暗黑图——它会破坏图标细节、影响文字可读性，且无法适配深色图片中的浅色文字 - 导出时统一用 sRGB 色彩空间，防止 macOS Safari 对 Display P3 图片在暗色模式下异常提亮
调试时注意 Safari 的缓存陷阱
Safari（尤其是 iOS）对 <picture> 的媒体查询匹配有延迟缓存行为：切换系统模式后，已加载的页面可能不会立即重选 <source>，除非强制刷新或触发 resize 事件。
临时验证方法：
- 在开发者工具的「Settings → Preferences → Appearance」中手动切换主题，再刷新页面
- 用
window.matchMedia("(prefers-color-scheme: dark)").matches在控制台确认当前匹配状态 - 不要依赖「自动切换」测试——先设为 dark，刷新；再设为 light，再刷新；两次都单独验证
真机上首次加载时，浏览器依据系统初始设置选择 <source>，之后系统切换不会触发重新解析——这是规范行为，不是 bug。
