如何通过 window.matchMedia 的监听回调动态切换网页在深色/浅色系统主题下的 SVG 图标-js教程-PHP中文网

svg内联fill失效因内联样式优先级高于css变量，阻断主题响应；须移除所有fill属性，改用var(--icon-color)并确保svg内联、配合data-theme控制。

如何通过 window.matchmedia 的监听回调动态切换网页在深色/浅色系统主题下的 svg 图标

为什么直接在 SVG 里写 fill="#000" 会失效

因为 fill 是内联样式或 CSS 属性，它不会响应系统主题变化；即使你用 @media (prefers-color-scheme: dark) 覆盖了全局 --icon-color 变量，SVG 元素若没主动读取该变量，颜色就卡死在初始值。常见现象是：系统切深色后图标还是黑的，或者始终是灰的——不是媒体查询没生效，而是 SVG 没“接上”变量。

SVG 必须用 var(--icon-color) 且不能有内联 fill

内联 fill（比如 <svg><path fill="#333" ...></path></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 事件，否则用户在系统设置里切换主题时，页面毫无反应。

常见错误包括：

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

只读一次 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);