需要在操作系统中更改暗/亮模式以强制刷新外部 SVG 文件

Question

我的网站使用了许多外部 SVG 文件，它们在 SVG 文件本身中带有自己的 <style> 元素。我在主网站 CSS 和中有暗模式媒体查询在 SVG 文件自己的样式中：@media (prefers-color-scheme:light) 和 @media (prefers-color-scheme:dark)

在初始加载或硬刷新时，一切都按预期工作，网站 CSS 和 SVG CSS 都会根据系统操作系统设置为暗模式还是亮模式来加载适当的样式。

但是，如果我在操作系统中切换模式，只会更新网站 CSS，而不是外部 SVG 文件的 CSS。

所以，我需要硬重新加载缓存的 SVG 图像，或者只是刷新 SVG CSS。

我在 javascript 中设置了一个事件侦听器，可以正确检测操作系统模式更改，但我不知道如何在操作系统暗/亮模式更改时触发 SVG 刷新。我搜索了高低，但不知道如何做到这一点，希望以最简单、最优雅的方式。

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    // WHAT GOES HERE TO REFRESH SVGs TO CORRECTLY REFLECT OS MODE?
});

window.location.reload(true); 不会硬重新加载缓存文件。我不确定cache.delete 在这里是否合适，或者我将如何使用它来强制重新加载所有 SVG 图像 (<img src="whatever.svg"/>)。也许我忽略了另一种方法。

感谢您的帮助。

Answer 1

这就是诀窍，几行 javascript。首先，在页面加载时，识别所有 SVG 图像并确定当前的prefers-color-scheme 主题。然后，检测该主题何时更改，并将动态缓存中断器附加到这些文件名，这会强制 SVG 重新加载。

// Dark mode changes needs cache refresh for external SVG file CSS.
allImg = document.querySelectorAll('img[src$=".svg"');
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  thisMode = 'dark';
} else {
  thisMode = 'light';
}
window.matchMedia('(prefers-color-scheme: '+ thisMode + ')').addEventListener('change', e => {
  allImg.forEach(img => {
    imgTime = Date.now();
    newImgSrc = img.src + '?' + imgTime;
    img.src = newImgSrc;
  });
});

21 年 12 月 13 日更新了原始答案。现在，强制重新加载 SVG 的 cachebuster 仅在模式更改后调用，而不是在每次页面加载时调用。

21 年 12 月 19 日更新：此解决方案不适用于 Safari（a known bug，其中 Safari 不尊重 SVG 文件 CSS 中的 prefers-color-scheme 媒体查询）。对于 Safari，我编写了额外的 JS，用于在页面加载时检测 Safari，使用上面的 prefers-color-scheme 条件，如果操作系统是暗模式，则将所有 SVG 文件名从“image.svg”替换为“image-dark.svg” ，调用每个 SVG 的浅色或深色版本。当操作系统深色/浅色主题更改时，它还会在 Safari 中重新加载页面。如果 Apple 修复了这个错误，我可以使用上面更简单的解决方案。