应使用CSS变量绑定filter: brightness(var(--img-brightness))，并在:root和[data-theme="dark"]中分别定义--img-brightness值（如1和0.85），通过层叠优先级实现主题响应式亮度控制。
暗黑模式下图片太刺眼，直接用 filter: brightness() 会失效？
不是失效，是亮度值没随主题动态更新。硬编码 brightness(0.7) 在亮色模式下图片发灰，切到暗黑模式又可能过暗——关键在把滤镜值和 CSS 变量绑定，让 filter 能响应主题切换。
- 必须用
filter: brightness(var(--img-brightness, 1));，不能写死数值 - CSS 变量需在 :root 和 [data-theme="dark"] 下分别定义，否则暗黑模式不生效
- 别用
filter: contrast()或saturate()替代亮度，它们改变的是对比度/饱和度，不是明暗感知
如何用 :root 和 [data-theme="dark"] 同步控制图片亮度
靠 CSS 层叠优先级 + 主题属性切换。亮色模式走 :root 默认值，暗黑模式靠更具体的属性选择器覆盖变量值，filter 自动重算。
:root { --img-brightness: 1; }-
[data-theme="dark"] { --img-brightness: 0.85; }（0.85 是实测较安全的起点，比 0.7 更耐看） - 图片元素统一加
style="filter: brightness(var(--img-brightness));"或写进 class - 避免在
[data-theme="dark"] img里直接写filter，否则无法被 JS 动态修改变量值
filter: brightness() 的取值陷阱：为什么设成 0.5 反而更亮？
这是常见误解：brightness(0.5) 是「减半亮度」，但人眼对暗部敏感，尤其在暗黑背景下，过低数值会让图片细节塌陷、发脏，反而显得“闷亮”。
- 推荐范围：亮色模式用
1，暗黑模式用0.8–0.9，极少情况低于0.75 - 不要用
brightness(0)或负值——CSS 规范不支持负 brightness，部分浏览器会静默忽略 - 如果图片本身偏暗（如夜景图），暗黑模式可设为
1，甚至微调contrast(1.05)提升层次，而非一味压亮度
背景图、<img alt="CSS如何为暗黑模式定制图片滤镜_通过CSS变量降低图片亮度" >、SVG 内嵌图片，滤镜写法有区别吗？
有。背景图走 background-filter（尚未广泛支持），所以必须统一用 filter 作用于容器；而 <img alt="CSS如何为暗黑模式定制图片滤镜_通过CSS变量降低图片亮度" > 和 SVG <image></image> 可直接受控，但 SVG 需注意坐标系影响。
立即学习“前端免费学习笔记（深入）”；
-
<img alt="CSS如何为暗黑模式定制图片滤镜_通过CSS变量降低图片亮度" >：直接加class="themed-img"，CSS 里写.themed-img { filter: brightness(var(--img-brightness)); } - 背景图：给父容器加 class，再用
filter（不是background-filter），因为后者只有 Safari 16+ 支持 - SVG 中的
<image href="..."></image>：需在<image></image>上设filter，且确保preserveAspectRatio不拉伸导致滤镜形变 - 所有场景都别忘了加
will-change: filter（仅当频繁动画时），否则 iOS Safari 可能闪烁
真正难的不是写对那行 filter，而是判断哪张图该调、调多少——同一套变量值套在产品截图和人物肖像上，效果天差地别。得一张张过，而不是寄希望于全局 magic number。
