暗色下打开的确认弹窗整体发灰,遮罩、弹窗、卡片三层半透明白叠在一起,颜色比设计稿脏一截。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,每层都用 rgba(255,255,255,.05) 提亮,多层叠加后亮度累加,色相被冲淡。半透明层还压住了下层文字。

「半透明叠加发灰」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。改完顺手把文档补一句,省得下次自己重新推一遍。

[data-theme='dark'] .modal { background: #232a33; }
[data-theme='dark'] .overlay { background: rgba(0,0,0,.6); }

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

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

具体做法是,改用不透明的表面色 按层级预先算好色值;必须半透明时只保留一层 其余用实色;截图取弹窗实际色值 与设计稿对比。

最后用这个标准收尾,弹窗表面颜色与设计稿一致,不再发灰。

作者 9823189