H5暗黑模式图片适配需分场景：视觉微调用CSS filter（绑定CSS变量响应主题），内容替换用<picture>（media="(prefers-color-scheme: dark)"切换图源），背景图则直接媒体查询。
在 H5 页面中实现暗黑模式下的图片色彩反相或替换，不能靠单一手段完成。关键要分清两种需求：一是视觉上“变暗/反相”，靠 CSS filter 动态调整；二是内容上“换图”，靠 <picture> 原生切换不同源文件。两者逻辑不同、适用场景不同，常需配合使用。
用 filter 实现亮度/反相等视觉调整（适合微调，不换图）
适用于希望保留同一张图片但适配暗色背景的场景，比如 logo、插画、icon 等。必须用 CSS 变量绑定 filter，否则无法响应主题切换：
- 在
:root中定义变量：--img-filter: brightness(1) contrast(1) invert(0); - 在
[data-theme="dark"]或@media (prefers-color-scheme: dark)中覆盖该变量，例如：--img-filter: brightness(0.85) contrast(1.05) invert(0.02);（注意 invert(0.02) 是极轻微反相，避免全反白底黑图） - 图片统一加样式：
filter: var(--img-filter);，别漏掉var()括号和分号 - 避免硬写
filter: brightness(0.8)——它不会随主题变化而更新，是静态值 - 若发现滤镜失效，检查父容器是否含
overflow: hidden、transform: translateZ(0)或position: fixed，这些可能创建隔离层叠上下文，阻断 filter 生效
用 <picture> 实现真正图源替换（适合语义化、无障碍、高保真）
当深色图是专门设计的（如深底浅色 logo、夜间风格 Banner），必须换图源。<picture> 是纯 HTML/CSS 方案，无需 JS，且支持无障碍读取：
- 结构示例：
<picture> <source media="(prefers-color-scheme: dark)" srcset="icon-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="icon-light.svg"> <img src="icon-light.svg" alt="品牌图标"> </picture>
-
<source>按顺序匹配，第一个满足条件的生效；<img>是必需后备，不可省略 - 兼容旧浏览器：不支持
prefers-color-scheme的环境会跳过所有<source>，直接渲染<img>，因此它的src应设为通用安全图 - 注意：
<img>标签本身不解析media属性，所以不要在<img>上写media="(prefers-color-scheme: dark)"，那是无效的
手动切换时如何同步图片行为
如果页面提供“一键切换”按钮（非仅跟随系统），需让图片同时响应。此时推荐组合方案：
- HTML 结构仍用
<picture>，确保默认按系统偏好加载 - JS 切换时，除了给
<html>加data-theme="dark"类，还应触发一次<picture>内部<img>的src更新（仅当需要强制覆盖系统设置时） - 更稳妥的做法：用 JS 动态重写
<source>的srcset，再调用img.src = img.src强制浏览器重新选择源 - 不建议只依赖 filter：它无法解决深色图文字可读性差、细节丢失、色偏等问题，尤其对摄影类图片
补充：背景图的暗黑适配更简单
如果是 CSS 背景图（如 background-image），直接用媒体查询即可，无需 JS 或 <picture>：
.banner { background-image: url('banner-light.jpg'); }@media (prefers-color-scheme: dark) { .banner { background-image: url('banner-dark.jpg'); } }- 该方式对
<div>等容器有效，但对<img>的src无效——这是浏览器规范限制
