SVG内联fill失效因内联样式优先级高于CSS变量，阻断主题响应；须移除所有fill属性，改用var(--icon-color)并确保SVG内联、配合data-theme控制。
为什么直接在 SVG 里写 fill="#000" 会失效
因为 fill 是内联样式或 CSS 属性，它不会响应系统主题变化；即使你用 @media (prefers-color-scheme: dark) 覆盖了全局 --icon-color 变量，SVG 元素若没主动读取该变量，颜色就卡死在初始值。常见现象是：系统切深色后图标还是黑的，或者始终是灰的——不是媒体查询没生效，而是 SVG 没“接上”变量。
SVG 必须用 var(--icon-color) 且不能有内联 fill
内联 fill（比如 <svg><path fill="#333" ...></svg>）优先级高于 CSS 变量，会阻断主题响应。正确做法是：
- 移除所有
fill、stroke等内联颜色属性 - 确保 SVG 是内联写法（非
<img src="..."/>），否则无法被 CSS 控制 - 统一用 CSS 设置：
svg path, svg circle { fill: var(--icon-color); stroke: var(--icon-stroke); } - 变量定义在
:root下，并用@media覆盖
示例：
:root {
--icon-color: #333;
--icon-stroke: #666;
}
@media (prefers-color-scheme: dark) {
:root {
--icon-color: #f0f0f0;
--icon-stroke: #aaa;
}
}
matchMedia 监听必须绑定到 change 事件，且检查 matches 初始值
window.matchMedia('(prefers-color-scheme: dark)') 返回的是一个 MediaQueryList 对象，它有 matches 属性（当前是否匹配），但不会自动触发回调。你得手动监听 change 事件，否则用户在系统设置里切换主题时，页面毫无反应。
常见错误包括：
- 只读一次
mql.matches就赋值，没监听后续变化 - 监听了但没做清理，导致多次挂载后回调执行多次
- 在 SSR 环境（如 Next.js）中未判断
typeof window !== 'undefined'，服务端报错
基础监听写法：
const mql = window.matchMedia('(prefers-color-scheme: dark)');
function handleThemeChange(e) {
document.documentElement.setAttribute(
'data-theme',
e.matches ? 'dark' : 'light'
);
}
mql.addEventListener('change', handleThemeChange);
// 首次加载时也调用一次，避免错过初始状态
handleThemeChange(mql);
data-theme 属性 + CSS 选择器比纯 prefers-color-scheme 更可控
只靠 @media (prefers-color-scheme: dark) 无法支持用户手动覆盖系统偏好（比如用户偏爱浅色模式，哪怕系统设了深色）。所以实际项目中，推荐用 data-theme 控制权收归前端：
- 初始值由
matchMedia决定，写入<html data-theme="dark"> - 用户点击切换按钮时，改
data-theme，同时存localStorage - CSS 中用
[data-theme="dark"] svg path覆盖变量，优先级高于@media - 这样 SVG 响应的是
data-theme，而不是系统快照，逻辑更清晰、可测试
关键点：不要让 @media 和 [data-theme] 的规则互相覆盖——把 @media 当作 fallback，[data-theme] 当作主控。
最容易被忽略的是：SVG 必须是内联的，且不能带硬编码颜色；matchMedia 实例一旦创建就要长期持有并正确移除监听（比如组件卸载时），否则内存泄漏+重复触发。这两点不处理，主题切换看着“动了”，但图标永远不变色。
