必须用css变量绑定filter实现亮度动态更新：在:root定义--img-brightness:1，在[data-theme="dark"]中覆盖为0.85，图片通过filter:brightness(var(--img-brightness))响应主题切换，硬编码brightness(0.8)无法随data-theme变化而更新。
filter: brightness() 必须绑定 CSS 变量，硬编码会卡死
直接写 filter: brightness(0.8) 在暗黑模式下图片确实变暗了，但切回亮色模式时它不会自动恢复——因为浏览器不监听主题变化，这个值就是个静态常量。真正能响应 data-theme="dark" 切换的，只有变量驱动的方式。
-
:root里定义--img-brightness: 1，作为亮色模式默认值 -
[data-theme="dark"]里覆盖为--img-brightness: 0.85（实测比 0.8 更耐看，0.75 以下易塌细节） - 图片统一加
filter: brightness(var(--img-brightness));，别漏掉var()的括号和分号 - 避免在
[data-theme="dark"] img里直接写filter: brightness(0.8)，否则 JS 动态改变量也无效
@media (prefers-color-scheme: dark) 对 background-image 有效，对 ![]()
src 无效
纯 CSS 无法修改 <img> 的 src 属性，所以用媒体查询切换背景图是可行的，但换 <img> 的源文件必须靠 JS 或 <picture></picture>。
- 背景图方案：直接写
background-image: url('light.jpg');，再用@media (prefers-color-scheme: dark)覆盖为dark.jpg -
<img>方案：必须用<picture></picture>+<source media="(prefers-color-scheme: dark)"></source>，srcset本身不解析 media 条件 - 错误写法：
<img src="light.jpg" srcset="dark.jpg 1x" media="(prefers-color-scheme: dark)">——media属性在<img>上被忽略 - 注意：CSS
filter和<picture></picture>是正交能力，可叠加使用，但别指望 filter 替代图源切换
filter 失效常见原因：合成层隔离、父容器裁剪、高优先级覆盖
暗黑模式媒体查询生效了，但图片滤镜没变，大概率不是代码写错，而是渲染层被阻断。
- 检查父容器是否含
overflow: hidden或transform: translateZ(0)—— 这些会创建新层叠上下文，导致filter被裁剪或未更新 - 用
getComputedStyle(img).filter在控制台确认实际计算值，看是否被重置 CSS 中的filter: none覆盖 - Chrome 115+ 在
position: fixed容器里对filter合成更严格，加will-change: filter可强制触发，但仅限频繁切换的图片，否则耗电 - 别在
<picture></picture>元素上直接写filter，应作用于内部<img>实例
响应式图片 + 暗黑模式 = 必须 JS 监听或服务端适配
srcset 只管 DPR 和宽度，不管颜色模式。浏览器选完图才应用 CSS filter，结果高分辨率图在暗色背景下可能过曝，低分辨率图又糊。
- 前端方案：用
window.matchMedia('(prefers-color-scheme: dark)')监听，JS 动态替换img.src，比如加?theme=dark参数 - CSS 方案（有限支持）：Safari 支持
image-set()，可写background-image: image-set('light.jpg' 1x, 'dark.jpg' 1x dark)，但 Chrome/Firefox 不认 - 服务端方案：通过
Sec-CH-Prefers-Color-Scheme请求头识别偏好，返回预处理的暗色版图片 URL - 别依赖
<source media="(prefers-color-scheme: dark) and (min-width: 768px)"></source>去切暗色专用图源——目前没有标准支持该组合条件
filter 当成“万能图源切换器”。它只是视觉层调整，不解决原始像素信息缺失问题；而 <picture></picture> 或 JS 动态加载才是真·双主题图源保障。两者得配合用，不能互相替代。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
