现代CSS中如何用自定义属性配合filter滤镜实现暗黑模式？-css教程-PHP中文网

必须用 CSS 变量绑定 filter 参数，如 filter: brightness(var(--img-brightness))，否则 data-theme 切换时滤镜不更新；需在 :root 和 [data-theme="dark"] 中分别定义变量，配合 transition: filter 实现平滑过渡。

现代css中如何用自定义属性配合filter滤镜实现暗黑模式？

必须用 var(--filter-value) 绑定滤镜参数，不能写死数值；否则 data-theme 切换后 filter 不会重算。

为什么 brightness(0.7) 在暗黑模式下完全失效

不是 CSS 没加载，而是硬编码的 brightness(0.7) 是静态值，JS 修改 document.documentElement.setAttribute('data-theme', 'dark') 时，浏览器不会重新解析这个固定数字。它和主题变量毫无关联，相当于“贴死的胶布”，撕不下来也变不了形。

常见错误写法：

img { filter: brightness(0.7); }

正确思路是把亮度值抽成变量，让 CSS 层叠机制驱动更新：

:root 定义默认亮度：--img-brightness: 1;
[data-theme="dark"] 覆盖该变量：--img-brightness: 0.85;
所有图片统一用：filter: brightness(var(--img-brightness));

如何让 filter 响应 data-theme 切换

关键在选择器优先级和作用域。:root 提供初始值，[data-theme="dark"] 是更具体的选择器，能覆盖同名变量——这正是 CSS 变量生效的底层逻辑。

务必注意以下三点：

变量必须声明在 :root 和 [data-theme="dark"] 两个地方，缺一不可；只写 @media (prefers-color-scheme: dark) 无法响应 JS 主动切换
操作目标只能是 document.documentElement，写 document.body.setAttribute('data-theme', 'dark') 完全无效
值必须是小写字符串 'dark' 或 'light'，不能传 true、1 或 'Dark'

组合滤镜时怎么避免失控

单用 brightness() 往往不够，常需搭配 contrast() 和 saturate() 来维持观感。但直接写死多个数值（如 filter: brightness(0.8) contrast(1.2) saturate(0.9)）仍会断开主题联动。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

推荐做法是为每个参数都设独立变量：

:root {
  --img-brightness: 1;
  --img-contrast: 1;
  --img-saturate: 1;
}
[data-theme="dark"] {
  --img-brightness: 0.85;
  --img-contrast: 1.15;
  --img-saturate: 0.95;
}
.themed-img {
  filter: brightness(var(--img-brightness))
          contrast(var(--img-contrast))
          saturate(var(--img-saturate));
}

这样每项都可单独调试，也方便后续扩展（比如暗色模式下对特定图片微调饱和度）。