@media (prefers-color-scheme: dark) {
.ad-slot { background: #1e1e1e; }
}
站点开了暗色模式,正文深灰背景,中间广告位是一块纯白 300x250,夜里看非常刺眼。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:广告容器背景写死白色,广告素材也只有浅色版本。页面没有根据配色方案切换。
「广告暗色模式」确认了原因之后,改动尽量只碰那一处,顺手改的东西后面最容易出问题。权限不要一口气开到最大,先加到够用再往上试,范围小才好收。
把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
处理上按这个顺序:容器背景改成透明或跟随主题变量;和联盟确认是否支持深色素材,能换就换一套;用配色方案媒体查询单独处理广告区域;系统切到暗色后逐屏看一遍。
确认没问题再收工,暗色模式下广告区背景与页面一致,不再出现整块白。
