SVG图标颜色可通过CSS变量动态控制并随主题切换，关键在于内联SVG中用fill:var(--icon-primary)绑定语义化变量，并在:root或html.dark中定义不同主题下的变量值，确保兼容性需避免外部SVG和内联fill硬编码。
SVG 图标（尤其是内联 SVG 或使用 fill 的图标）的颜色可以通过 CSS 自定义属性（CSS 变量）动态控制，并随主题（如深色/浅色模式）自动切换，关键在于将 fill 值绑定到一个语义化的 CSS 变量，再在不同主题下更新该变量。
用 CSS 变量定义主题色
在 :root 中定义基础颜色变量，例如：
:root {
--icon-primary: #333;
--icon-secondary: #666;
}
@media (prefers-color-scheme: dark) {
:root {
--icon-primary: #ddd;
--icon-secondary: #aaa;
}
}
这样系统级暗色偏好开启时，变量值自动更新，无需 JS 干预。
在 SVG 中使用 var() 控制 fill
确保 SVG 是内联写法（或通过 <use> 引用内联 symbol），然后直接在 SVG 元素上设置 fill：
立即学习“前端免费学习笔记（深入）”；
<svg width="20" height="20">
<path d="M10 2L12 5h3l-2 2 1 3-3-.5-3 .5 1-3-2-2h3z"
fill="var(--icon-primary)" />
</svg>
注意：不能对外部 SVG 文件（如 <img src="icon.svg">）用 CSS 控制 fill —— 它是独立文档，不继承父级样式。必须用内联、<use> 或 CSS background-image + mask 才能响应变量。
配合 class 切换主题更灵活
除了媒体查询，也可手动切换主题类（如 html.dark），增强可控性：
html {
--icon-primary: #333;
}
html.dark {
--icon-primary: #eee;
}
html.high-contrast {
--icon-primary: #000;
}
JS 切换只需：document.documentElement.classList.toggle('dark')，所有 fill: var(--icon-primary) 图标即时响应。
兼容性与注意事项
现代浏览器均支持 CSS 变量和 prefers-color-scheme。需注意：
- SVG 必须是内联或 symbol 引用，否则 fill 不可被 CSS 覆盖
- 避免在 SVG 标签里写死
fill="#333"—— 会覆盖 CSS 中的var() - 若图标含多色路径，可为每个路径单独绑定不同变量（如
--icon-success、--icon-error） - 配合
currentColor也是一种轻量方案（让 fill 继承文字颜色），但灵活性不如变量
