brightness()在暗黑模式无反应是因为硬编码值不响应主题变化，必须用CSS变量--img-brightness在:root定义默认值，并在[data-theme="dark"]中覆盖，使filter: brightness(var(--img-brightness))动态生效。
filter: brightness() 为什么在暗黑模式切换时没反应
不是 CSS 不生效，而是你写了 brightness(0.8) 这种硬编码值。浏览器不会因为 data-theme="dark" 改变或 prefers-color-scheme: dark 匹配就重新计算它——值是静态的，滤镜也就卡死不动。
必须把亮度值抽成 CSS 变量，让 filter 依赖这个变量，变量一变，filter 自动重算。
-
--img-brightness必须在:root定义默认值（比如1） - 在
[data-theme="dark"]或媒体查询里用更具体的选择器覆盖该变量（比如0.85） - 图片样式写成
filter: brightness(var(--img-brightness))，不能直接写死数字 - 别在
[data-theme="dark"] img里重复写filter，否则 JS 动态改主题时变量更新了，但样式没绑定变量，照样无效
如何用 :root + [data-theme="dark"] 正确绑定变量
靠的是 CSS 层叠优先级：默认走 :root 的值，[data-theme="dark"] 因为选择器更具体，能覆盖同名变量，且作用域内所有引用该变量的 filter 都会立刻响应。
-
:root { --img-brightness: 1; }—— 亮色模式基础值 -
[data-theme="dark"] { --img-brightness: 0.85; }—— 暗黑模式推荐起点，比0.7更耐看，细节不易塌陷 - 确保
[data-theme="dark"]是根元素（如<html data-theme="dark">）或至少包裹整个页面，否则变量作用域不生效 - 如果用
@media (prefers-color-scheme: dark)，注意它和 JS 切换逻辑可能冲突；建议以 JS 设置的data-theme为准，媒体查询只作 fallback
background-image、<img>、SVG 图片的 filter 写法差异
三者不能混用同一套规则，否则部分图片根本不受控。
立即学习“前端免费学习笔记（深入）”；
-
<img>：加 class 如class="themed-img"，CSS 写.themed-img { filter: brightness(var(--img-brightness)); } - 背景图：
background-image本身不支持filter，必须套一层容器（如<div class="bg-container">），对容器设filter，再用background-image和background-size: cover等控制显示 - SVG 中的
<image>：可直接受filter控制，但要注意 SVG 坐标系和preserveAspectRatio可能导致缩放异常；建议统一用viewBox+width/height固定尺寸后再加 filter
brightness() 的安全取值与常见误用
人眼在暗背景下对暗部敏感，brightness(0.5) 不是“柔和”，而是让阴影细节发脏、发闷，反而显得更亮——这不是参数错了，是感知偏差。
- 亮色模式一律用
1，避免无谓发灰 - 暗黑模式推荐
0.8–0.9，极少情况才用0.75；低于0.75易塌陷，高于0.95失去暗黑氛围 - 别用
brightness(0)或负值，规范不支持，Safari 和 Firefox 会静默忽略 - 偏暗原图（如夜景）在暗黑模式下可设为
1，甚至微调contrast(1.05)提层次，而非强行压暗 - 频繁切换主题时，加
will-change: filter，否则 iOS Safari 可能闪烁
