图片与图标资源需要针对深色背景准备适配版本
别名: 深色图标 · dark-theme assets · inverse icons
概念解释
为浅色背景画的深色图标，换到深色底上就是一块近黑。图和图标是资源文件，不会像文本色那样跟着主题变量自动重算。深色外观要有适配版资源：浅色底用深色图形，深色底用浅色或描边版，照片上要有隔离背景或蒙版，不能只换页面底色、把同一份 PNG 留下来。
CSS 把字从黑改成白是改计算值；同一份烤进像素的图形没有计算值可改。
机制
位图和图标字体把形状固定在一组像素或字模里。主题切换改的是周围的 CSS 色，资源内部的色不参与。深色图形因此在深色底上失去边缘。带透明底的深灰图标尤其隐蔽：浅色主题里它像描边，深色主题里它像没加载。照片、产品图、浅色信息图四周若没有隔离，会在深色页上变成一块发光的白矩形，或细节溶进近黑。
SVG 若用 currentColor 或主题变量画填充，可以跟文本一起变；若把色值写死在 SVG 内部，它和 PNG 一样僵。多色品牌标志不能简单取反——取反会得到一套从未被批准的色相——需要单独的深色锁定稿，而不是运行时滤镜。
怎么研究
建一份资源清单：图标、标志、空状态插画、产品图、信息图。在浅色与深色外观下各截一套，标记「溶进背景」「白矩形发光」「取反后色相错误」。
自变量：资源类型（单色 SVG / 多色 PNG / 照片）、是否提供深色变体、是否用滤镜取反。 因变量：深色底上可辨认的比例、误判为「图标缺失」的次数、品牌标志在深色下的色相错误。
把「页面底是深色」和「图标所在的卡片仍是浅色」分开。后者不需要深色变体，套错变体反而会在浅卡片上消失。强制高对比还会再改一轮资源色，深色变体不是高对比变体。
边界
用户生成的照片、截图、第三方广告素材无法为深色准备适配版；能做的是给容器加隔离（边或浅衬），不要去改原图。地图瓦片、卫星图改色会毁掉地理编码，通常保持原样并接受它是浅色岛。纯装饰且关闭了替代文本的图形，溶掉不丢失信息，优先级低于功能图标。打印与 PDF 导出走的是浅色纸，不必跟屏幕深色变体绑在一起。
怎么落地
- 功能图标出浅色底与深色底两套（或一份跟随
currentColor的 SVG）；主题切换时换的是资源，不是给同一份 PNG 加滤镜。 - 多色标志出深色锁定稿，不要运行时取反。
- 照片和浅色信息图在深色页上加隔离底或细边，避免溶边或白矩形。
- 验证：切到深色外观，扫一遍导航图标、空状态、标志、内容图。溶进底里的、看起来像破图的、取反后品牌色相错误的，记为缺少适配版。