暗黑模式下图片发灰不应直接用filter: brightness()，而应通过contrast()、saturate()组合微调或改fill色实现相对适配；SVG需内联或currentColor方案，避免brightness破坏渲染。

暗黑模式下图片发灰？别用 filter: brightness() 硬调

直接对 <img> 元素加 filter: brightness(1.2) 在暗黑模式下看似提亮，但实际会破坏图片原有对比度、让噪点更明显，甚至导致 SVG 图标边缘模糊。根本问题是：亮度调节不该是“全局覆盖”，而应配合背景明暗做**相对适配**——图片在深色背景下需要的是“更高对比度呈现”，不是单纯变亮。

:root 里定义主题色变量，但图片亮度不能只靠它

:root 适合存颜色、间距、圆角等可复用设计令牌，比如：

:root {
  --bg-primary: #ffffff;
  --text-primary: #1a1a1a;
}

但图片亮度不是静态值，它依赖于当前 body[data-theme="dark"] 下的背景与内容关系。硬塞一个 --img-brightness: 1.15 到 :root，会导致浅色模式下图片过曝。正确做法是把亮度逻辑“绑定到主题容器”上：

• 在 body[data-theme="dark"] 下重置图片默认样式，优先用 opacity 或 contrast() 微调感知亮度
• 对关键图片（如 logo、icon）单独加 class，例如 class="logo-dark-optimized"，再针对性设 filter: contrast(1.05) brightness(1.02)
• 避免在 :root 中定义任何以“brightness”“saturation”结尾的 filter 变量——CSS 不支持在 filter 中使用 var(--x) 计算函数值（除非用 @property 显式注册，且兼容性差）

body[data-theme="dark"] img 的默认处理策略

多数场景下，你不需要给所有图片加 filter。先检查是否真有亮度问题：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 纯色背景上的 PNG 透明图 → 通常无需调整，反而加 brightness() 会让半透区域发虚
• 照片类 JPG → 更推荐用 color-scheme: dark 配合系统级色彩管理，或后端提供暗色优化版图片 URL
• 必须前端干预时，用组合 filter 更安全：

  body[data-theme="dark"] img {
    filter: contrast(1.03) saturate(1.02);
  }

  比单用 brightness(1.1) 更自然
• 若某张图在暗色下确实发黑（如浅灰 icon），用 image-rendering: -webkit-optimize-contrast 强制浏览器提升锐度，比调亮度更有效

SVG 内联图片要单独处理，fill 和 filter 不能混用

内联 SVG 的 <path fill="#333"></path> 在暗色模式下可能变成不可见的深灰。这时改 fill 比套 filter 更精准：

body[data-theme="dark"] svg path {
  fill: var(--text-primary, #e0e0e0);
}

但如果 SVG 是作为 <img src="icon.svg"> 引入的，就无法用 CSS 控制内部 fill —— 此时只能：

• 改用 <svg></svg> 内联写法（推荐）
• 或在 SVG 文件中用 fill="currentColor"，再通过父元素 color 控制
• 切勿对 <img> 格式的 SVG 加 filter: brightness()，会导致描边失真和抗锯齿异常

真正难搞的从来不是怎么写那几行 CSS，而是得想清楚：这张图在暗色背景下，用户到底需要看清什么——是轮廓？文字？还是阴影层次？调亮度只是手段，不是目标。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！