暗色模式公告图片看不清 背景写死 #fff 没跟随主题

@media (prefers-color-scheme: dark) {
  .site-notice { background: #1f1f1f; color: #e8e8e8; }
}

系统切到暗色后，公告里的透明 PNG 图标几乎看不见，白色背景块在深色页面上格外刺眼，公告正文灰字对比度只有 2.1:1。这类现象通常不是突然出现的，往前翻半天日志能看到苗头。

追下去是这么回事：公告容器背景写死 #fff，正文颜色写死 #666，没有跟随主题的 CSS 变量。图片是透明底，深色模式下没有衬底就看不清轮廓。

「暗色模式公告配色」改完先别急着全量，挑一台机器放半天，真有问题这段时间就能看出来。权限不要一口气开到最大，先加到够用再往上试，范围小才好收。

把复现步骤压到三条以内，交给同事也能跑出来，才算真的定位清楚。

处理上按这个顺序：背景和文字改用主题变量，暗色媒体查询里给一套对应值；透明图加一层浅色衬底，或者换用带底色的 SVG；用浏览器渲染面板模拟深色偏好，检查对比度。

确认没问题再收工，暗色下公告正文对比度升到 7:1 以上，图标轮廓清晰可辨。