css中filter: brightness()在暗黑模式下失效，是因为硬编码数值（如brightness(0.7)）无法响应主题切换；必须绑定css变量var(--img-brightness)，并在:root和[data-theme="dark"]中分别定义该变量值，才能实现动态更新。
为什么直接写 filter: brightness(0.7) 在暗黑模式下会失效
不是 CSS 不生效，而是亮度值没随主题切换动态更新。硬编码 brightness(0.7) 在亮色模式下图片发灰，切到暗黑模式又可能过暗——关键在把滤镜值和 CSS 变量绑定，让 filter 能响应主题变化。
必须用 filter: brightness(var(--img-brightness));，不能写死数值；否则 JS 切换 data-theme="dark" 时，样式不会重算。
-
--img-brightness必须在:root和[data-theme="dark"]中分别定义，否则变量覆盖失败 - 推荐起点值：
:root { --img-brightness: 1; }，[data-theme="dark"] { --img-brightness: 0.85; } - 别用
contrast()或saturate()替代亮度控制，它们不解决明暗感知问题
如何用 :root 和 [data-theme="dark"] 同步控制图片亮度
靠 CSS 层叠优先级 + 属性选择器覆盖实现。亮色模式走 :root 默认值，暗黑模式靠更具体的选择器（[data-theme="dark"]）提升变量作用域优先级，filter 自动重算。
- 不要在
[data-theme="dark"] img里直接写filter: brightness(0.85)，这会让 JS 动态修改变量值时失效 - 图片统一加 class 如
class="themed-img"，CSS 写.themed-img { filter: brightness(var(--img-brightness)); } - 若用
prefers-color-scheme: dark媒体查询替代data-theme，需确保它与 JS 主题切换逻辑不冲突（比如同时存在时以 JS 为准）
filter: brightness() 的取值陷阱：为什么设成 0.5 反而更“闷亮”
brightness(0.5) 是线性减半亮度，但人眼对暗部敏感，尤其在暗黑背景下，过低数值会让图片细节塌陷、发脏，反而显得“闷亮”，不是真正变暗。
- 安全范围：亮色模式用
1，暗黑模式推荐0.8–0.9，极少情况低于0.75 - 避免
brightness(0)或负值——CSS 规范不支持负 brightness，部分浏览器静默忽略 - 如果图片本身偏暗（如夜景图），暗黑模式可设为
1，甚至微调contrast(1.05)提升层次，而非一味压亮度
背景图、<img>、SVG 图片的滤镜写法区别
三者不能混用同一套写法：背景图无法用 background-filter（仅 Safari 16+ 支持），必须靠容器 filter；<img> 和 SVG <image></image> 可直接受控，但 SVG 需注意坐标系影响。
-
<img>：加 class 后在 CSS 中写.themed-img { filter: brightness(var(--img-brightness)); } - 背景图：给父容器加 class，再用
filter（不是background-filter），例如.bg-container { filter: brightness(var(--img-brightness)); } - SVG
<image href=""></image>：需在<image></image>元素上设filter，且确保preserveAspectRatio不拉伸导致滤镜形变 - 所有场景都别忘了加
transform: translateZ(0)（仅当频繁动画时），否则 iOS Safari 可能闪烁
[data-theme="dark"] 必须能正确覆盖 :root 中的变量，否则哪怕 HTML 加了属性，滤镜也纹丝不动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
