系统切到暗色后,页头那个蓝色 logo 变成了荧光绿,品牌色完全走样,同一张图在亮色下正常。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,暗色样式里给整页加了 filter: invert(1),用来把白底黑字翻成黑底白字,图片也一起吃到了这个滤镜。色相翻转后品牌色就废了。

「暗色模式 logo」这类改动最怕改一半,回滚脚本先准备好,再动生产。改完顺手把文档补一句,省得下次自己重新推一遍。

@media (prefers-color-scheme: dark) {
  .logo { filter: none; }
  .logo-dark { display: block; }
}

监控和日志的时间要对上,时区不一致会多绕很大一圈。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。

动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。

具体做法是,把滤镜只作用在文字和边框 不要加在根元素上;logo 单独出一版暗色文件 用 prefers-color-scheme 切换;确实要反色就给 img 再单独反回来;切一次暗色模式看 logo 颜色是否还是品牌色。

最后用这个标准收尾,暗色模式下 logo 保持原品牌色 没有出现反色。

作者 9823189