操作系统明暗模式切换时如何强制刷新外部SVG文件的适配样式

浏览器将<img>标签加载的外部SVG视为静态图像资源，完成首次渲染后不会主动重新解析其内部的媒体查询规则，因此系统明暗模式切换时SVG样式不会同步更新。下面提供两种可直接落地的实现方案：

方案一：无需修改现有SVG和标签，仅补充JS逻辑 #

直接在明暗模式切换事件中，给所有SVG图片的src添加当前主题标识的查询参数，触发浏览器重新加载解析SVG，同主题下不会重复发起请求，缓存依然有效：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const currentTheme = e.matches ? 'dark' : 'light';
    document.querySelectorAll('img[src$=".svg"]').forEach(img => {
        // 移除之前拼接的主题参数，保留原始地址
        const baseSrc = img.src.split('?')[0];
        img.src = `${baseSrc}?t=${currentTheme}`;
    });
});

注意：服务端需要配置忽略SVG资源的查询参数，保证无论t参数取值如何都返回对应SVG文件即可。

方案二：无刷新性能最优方案 #

如果希望切换模式时完全不发起额外请求，可以调整实现方式：

1. 将页面中所有加载SVG的<img>标签替换为<object>标签：

<object type="image/svg+xml" data="whatever.svg"></object>

2. 把SVG内部<style>里的固定颜色值替换为CSS变量，例如：

/* SVG内部样式 */
.icon-path {
    fill: var(--svg-icon-fill);
    stroke: var(--svg-icon-stroke);
}

3. 在网站主CSS中定义全局变量的明暗规则：

:root {
    --svg-icon-fill: #222;
    --svg-icon-stroke: #000;
}
@media (prefers-color-scheme: dark) {
    :root {
        --svg-icon-fill: #ddd;
        --svg-icon-stroke: #fff;
    }
}

该方案无需额外JS处理SVG刷新，切换模式时SVG会自动继承全局变量的最新值，实时更新样式。

内容的提问来源于stack exchange，提问作者david