标签本身不监听系统主题变化，仅在页面加载或主题切换后由浏览器原生重选资源；必须严格按顺序写media="(prefers-color-scheme: dark)"等完整语法，并保留带src和alt的作为渲染载体，否则无法自动切换。

标签本身不支持暗黑模式自动切换，但可以用 <source></source> 的 media 属性配合 (prefers-color-scheme: dark) 实现——前提是写法合规、顺序正确、<img> 不可省略。

为什么 <picture></picture> 不能直接“响应”暗黑模式？

<picture></picture> 是为 <img> 提供多源后备的容器，它只根据 media 和 srcset 条件做**一次性资源选择**，不监听系统主题变化。但它能利用浏览器对 @media (prefers-color-scheme: dark) 的原生支持，在页面加载时或系统主题切换后自动重选并替换图片（Chrome/Firefox/Safari 15.4+/Edge 101+ 均支持）。

<source></source> 的 media 属性必须写全且顺序严格

常见错误是漏括号、大小写错、顺序颠倒，导致暗色图完全不生效：

Wechat HTML Publisher

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

下载

• media="(prefers-color-scheme: dark)" —— 正确，括号、冒号、空格、小写缺一不可
• media="prefers-color-scheme: dark" 或 media="dark" —— 浏览器直接忽略该 <source></source>
• 暗色 <source></source> 放在亮色之后 —— Safari 会跳过，始终用亮色图
• 没写 <img> 或 <img src=""> —— 页面空白，因为 <picture></picture> 本身不渲染

<img> 的 src 和 alt 是强制要求

<img> 不是“备用”，而是最终渲染载体。它的 src 必须指向一个真实可用的图片（哪怕和某个 <source></source> 重复），alt 必须有语义内容：

• 不写 src 或设为 src="#" → 图片不显示，无障碍读屏失败
• alt="" 或缺失 → 影响可访问性，部分浏览器加载失败时无提示
• 推荐复用浅色图作为 <img> 的 src：兼容不支持 prefers-color-scheme 的旧浏览器（如 Safari 13）

实际可用的最小结构示例

<picture><source media="(prefers-color-scheme: dark)" srcset="hero-dark.webp"><source media="(prefers-color-scheme: light)" srcset="hero-light.webp">
  @@##@@
</source></source></picture>

注意：srcset 可扩展为 "hero-dark@2x.webp 2x" 支持高 DPR 设备，但每个 <source></source> 的 srcset 独立解析，不共享。

真正容易被忽略的是：系统主题切换后，图片是否重载，取决于浏览器是否触发了重新匹配逻辑——这仅在 <source></source> 写法 100% 合规时才可靠；一旦 <img src="hero-light.webp" alt="官网首页主视觉图"> 缺失或 media 语法有瑕疵，就会回退到静态 fallback，失去“自动”效果。

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