不支持暗黑模式自动切换，因其不监听 prefers-color-scheme 变化，需在 的 media 属性中显式声明且按顺序匹配；暗黑源须置顶、写全媒体查询、指定 type，并确保图像语义与尺寸一致以避免布局抖动。

为什么 <picture></picture> 本身不支持暗黑模式自动切换

因为 <picture></picture> 是响应式图像容器，只响应视口尺寸、设备像素比、srcset 中的宽度描述符等静态条件，**不监听系统配色方案变化**。它没有内置对 prefers-color-scheme 媒体查询的支持——这个查询必须由外部 <source></source> 的 media 属性显式声明。

<source media="(prefers-color-scheme: dark)"></source> 必须放在最前面

浏览器按 <source></source> 顺序匹配第一个满足 media 条件的源。如果暗黑模式的 <source></source> 放在后面，而前面的 <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">
  @@##@@
</source></source></source></source></picture>

• media="(prefers-color-scheme: dark)" 必须写全，不能简写为 (dark) 或 dark
• 每个 <source></source> 应指定 type，避免浏览器因 MIME 类型未知而跳过
• fallback <img src="logo-light.png" alt="Logo"> 的 src 应与最后一个未加 media 的 <source></source> 一致，确保降级可靠

暗黑图和亮色图必须语义等价且尺寸一致

换图不是换风格，而是适配可访问性与视觉一致性。如果暗黑版 logo 文字变粗、留白压缩、或宽高比不同，会导致布局抖动（layout shift），尤其在 SSR 或首屏渲染时明显。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

实操建议：

• 两张图用相同 width 和 height 属性（或 CSS aspect-ratio）约束容器
• 避免仅靠 CSS 滤镜（如 filter: invert(1)）模拟暗黑图——它会破坏图标细节、影响文字可读性，且无法适配深色图片中的浅色文字
• 导出时统一用 sRGB 色彩空间，防止 macOS Safari 对 Display P3 图片在暗色模式下异常提亮

调试时注意 Safari 的缓存陷阱

Safari（尤其是 iOS）对 <picture></picture> 的媒体查询匹配有延迟缓存行为：切换系统模式后，已加载的页面可能不会立即重选 <source></source>，除非强制刷新或触发 resize 事件。

临时验证方法：

• 在开发者工具的「Settings → Preferences → Appearance」中手动切换主题，再刷新页面
• 用 window.matchMedia("(prefers-color-scheme: dark)").matches 在控制台确认当前匹配状态
• 不要依赖「自动切换」测试——先设为 dark，刷新；再设为 light，再刷新；两次都单独验证

真机上首次加载时，浏览器依据系统初始设置选择 <source></source>，之后系统切换不会触发重新解析——这是规范行为，不是 bug。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！