直接用 background-image + mask 会丢失主题色同步，因为 mask 不继承颜色且透出内容的颜色写死在资源中；解法是用单色 SVG 作 mask 形状，再通过 background-color 注入 CSS 变量色，实现形状与颜色分离控制。
为什么直接用 background-image + mask 会丢失主题色同步？
因为 mask 本身不继承颜色，它只控制“透出区域”，而透出的内容（比如 background-image）若用的是纯色 SVG 或 PNG，颜色就写死在资源里了。主题切换时改 --primary-color，图标纹丝不动。
真正能响应 CSS 变量的，是内联 SVG 的 fill 属性——但你又不能把整个 SVG 写进每个 icon 元素里。解法是：把 SVG 当成 mask 源，再用一个带变量色的层去“透出来”。
关键思路：mask 只负责形状，background-color 或 color 才负责主题色，两者分离且可独立控制。
怎么用 mask + background-color 实现单 SVG 多主题图标？
把图标 SVG 做成纯黑（#000）单色图，作为 mask 图层；再用一个 div 或伪元素承载这个 mask，并通过 background-color 设置主题色，让颜色透过 mask 显形。
立即学习“前端免费学习笔记（深入）”；
- SVG 必须导出为单色（推荐用 Figma / Illustrator 导出时勾选 “Preserve Illustrator Editing Capabilities” 关闭，避免嵌入样式）
- mask 图像需设为
mask-mode: luminance（默认值），确保黑底透色、白底遮盖 - 容器必须有明确尺寸（
width/height），否则 mask 不生效 - 主题色通过
background-color: var(--icon-color, #333)注入，随 :root 变量动态更新
`.icon-home {
width: 24px;
height: 24px;
background-color: var(--icon-color, #333);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h-3V7a1 1 0 0 0-2 0v5H8v8z'/%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h-3V7a1 1 0 0 0-2 0v5H8v8z'/%3E%3C/svg%3E") no-repeat center;
mask-size: contain;
}`
主题切换时，mask 图标为什么不重绘？如何强制刷新？
浏览器对 data URL 的 mask 缓存极强，哪怕 SVG 内容没变，只要变量变了，它也不重新解析——结果就是颜色不变。这不是 bug，是规范行为。
绕过缓存的最轻量做法：给 data URL 加个无意义查询参数，用 CSS 变量拼接进去，让每次主题切换都生成新 URL。
- 在 :root 中定义
--mask-tick: 0，切换主题时用 JS 改为++tick - mask URL 写成：
url("data:image/svg+xml;...&t=${tick}")（JS 注入）或用attr()+ 自定义属性（有限制） - 更稳方案：把 SVG 存为独立 .svg 文件，用相对路径引用，靠文件名或版本号控制缓存（如
home-icon.v2.svg）
注意：Safari 对 data URL mask 的支持不稳定，16.4+ 才完整支持 mask-mode，生产环境建议 fallback 到 background-image + filter: hue-rotate() 方案。
和字体图标（如 Iconfont）比，mask 方案的兼容性与性能差异在哪？
字体图标靠 color 驱动，天生支持变量，但缩放锯齿、语义缺失、无法做复杂形状（如带镂空的图标）；mask 方案本质是位图/矢量掩模，清晰度高、形状自由，但 IE 完全不支持，Edge 16–18 需加 -webkit- 前缀且不支持 mask-mode。
- 体积：内联 data URL 增大 CSS，但免 HTTP 请求；外部 SVG 可 gzip，更利于复用
- 渲染性能：mask 是合成层操作，比字体渲染略重，但现代设备无感；频繁切换主题时，避免在动画帧里改
--mask-tick - 可访问性：必须配
aria-hidden="true"和外层文字说明，mask 图标本身无语义
真正难处理的不是多主题，而是深色模式下 SVG 的 luminance 值反向——黑色图标在深色背景上可能变灰，得额外加 mask-type: alpha 或预处理 SVG 的亮度通道。
