<picture>标签本身不监听系统主题变化，仅在页面加载或主题切换后由浏览器原生重选资源；必须严格按顺序写media="(prefers-color-scheme: dark)"等完整语法，并保留带src和alt的<img>作为渲染载体，否则无法自动切换。
<source> 的 media 属性配合 (prefers-color-scheme: dark) 实现——前提是写法合规、顺序正确、<img> 不可省略。
为什么 <picture> 不能直接“响应”暗黑模式？
<picture> 是为 <img> 提供多源后备的容器，它只根据 media 和 srcset 条件做**一次性资源选择**，不监听系统主题变化。但它能利用浏览器对 @media (prefers-color-scheme: dark) 的原生支持，在页面加载时或系统主题切换后自动重选并替换图片（Chrome/Firefox/Safari 15.4+/Edge 101+ 均支持）。
<source> 的 media 属性必须写全且顺序严格
常见错误是漏括号、大小写错、顺序颠倒，导致暗色图完全不生效：
-
media="(prefers-color-scheme: dark)"—— 正确，括号、冒号、空格、小写缺一不可 -
media="prefers-color-scheme: dark"或media="dark"—— 浏览器直接忽略该<source> - 暗色
<source>放在亮色之后 —— Safari 会跳过，始终用亮色图 - 没写
<img>或<img src="">—— 页面空白，因为<picture>本身不渲染
<img> 的 src 和 alt 是强制要求
<img> 不是“备用”，而是最终渲染载体。它的 src 必须指向一个真实可用的图片（哪怕和某个 <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"> <img src="hero-light.webp" alt="官网首页主视觉图"> </picture>
注意：srcset 可扩展为 "hero-dark@2x.webp 2x" 支持高 DPR 设备，但每个 <source> 的 srcset 独立解析，不共享。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：系统主题切换后，图片是否重载，取决于浏览器是否触发了重新匹配逻辑——这仅在<source> 写法 100% 合规时才可靠；一旦 <img> 缺失或 media 语法有瑕疵，就会回退到静态 fallback，失去“自动”效果。
