深色模式图片太刺眼：分别设计内容图与界面图
网站背景已经切成深色，白底截图和浅色图标却仍然刺眼，这是深色模式里常见的断层。近期CSS配色能力持续发展，但更重要的是先分清图片职责：文章截图需要保留信息，装饰图和界面图则可以为不同配色准备不同版本。
网站背景已经切成深色，白底截图和浅色图标却仍然刺眼，这是深色模式里常见的断层。近期CSS配色能力持续发展，但更重要的是先分清图片职责：文章截图需要保留信息，装饰图和界面图则可以为不同配色准备不同版本。
先建立图片使用清单
把Logo、图标、插画、产品截图和用户上传内容分别处理。不要对所有图片统一加反相滤镜，因为照片肤色、图表图例和截图文字可能因此失真。对界面素材，可以准备深浅两组版本；对内容截图，优先使用适当边框与周围留白，让读者看清原始信息。
配色规则需要有回退
使用light-dark等新能力时，先确认当前浏览器与目标值类型的兼容性。它依赖配色方案设置，不能只添加函数就期待整站自动完成主题切换。还要给不支持新写法的环境保留可用样式。用户明确选择的主题，应与系统偏好有清晰优先关系，避免刷新后突然切换。
验收不能只看首页
检查透明背景Logo、彩色图表、白底截图和错误提示图，至少覆盖正文与导航两类场景。比较对比度、细节可读性和加载是否造成布局变化。如果替换了素材，记得更新文本替代说明与资源缓存。深色模式的完成标准是信息在两种主题下都容易读取，而不是把所有像素变暗。
资料与继续阅读
MDN light-dark与配色方案 · 整理日期：2026-10-30。本文为独立编辑整理，操作建议不代表本站已经完成实测。
本文新增价值
围绕“深色模式图片太刺眼”给出适用条件、判断顺序与具体检查办法，区分需要修改的环节和可以保留的设置，并用可观察的结果验收，避免只提供笼统建议。
围绕“深色模式图片太刺眼”给出适用条件、判断顺序与具体检查办法，区分需要修改的环节和可以保留的设置，并用可观察的结果验收，避免只提供笼统建议。