[data-theme='dark'] img {
  filter: brightness(.85) contrast(1.05);
}

切到暗色模式后,正文里 12 张白底产品图变成一块块亮斑,夜里看明显晃眼,浅色主题下又正常。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。

原因不复杂,图片本身是白底位图,暗色主题只换了容器背景,图片像素没有跟着降亮度。直接加滤镜又会把彩色图整体拉灰。

围绕「暗色模式图片刺眼」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。

验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。

处理上按这个顺序:给图片容器加轻微降亮度的 filter 只在暗色下生效;白底插图单独换成透明底或暗色版本;在暗色下逐张翻看 确认文字和图片对比不刺眼。

改完只确认一件事:暗色下插图不再刺眼,彩色图没有明显发灰。

作者 9823189