[data-theme='dark'] .card {
background: #232a33;
border: 1px solid rgba(255,255,255,.08);
box-shadow: none;
}
浅色下卡片靠阴影分层,暗色下卡片和背景糊成一整块,边界完全看不出,层级关系丢了。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:阴影颜色是 rgba(0,0,0,.15),投在 #1b1b1b 的背景上几乎不可见。暗色界面需要靠浅色描边或提亮表面来表达层级。
围绕「暗色模式阴影不可见」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。权限不要一口气开到最大,先加到够用再往上试,范围小才好收。
把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
处理上按这个顺序:暗色下把卡片背景提亮一档 与页面背景拉开;加 1px 半透明浅色描边替代阴影;对比卡片与背景的实际色值 差值太小就再调。
确认没问题再收工,暗色下卡片边界清楚,叠放层级一眼能分出来。
