我的網站使用了許多外部 SVG 檔案，它們<style>在 SVG 檔案本身中具有自己的元素。我的主要網站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"/>)。也許我忽略了另一種方法。
感謝您的任何幫助。
uj5u.com熱心網友回復：
這可以解決問題，幾行 javascript。首先，在頁面加載時，識別所有 SVG 影像，在這些檔案名后附加一個快取破壞者，并確定當前prefers-color-scheme主題。然后，檢測該主題何時更改并在更改時重新加載頁面。
// Dark mode changes needs cache refresh for external SVG file CSS.
allImg = document.querySelectorAll('img[src$=".svg"');
allImg.forEach(img => {
imgTime = Date.now();
newImgSrc = img.src '?' imgTime;
img.src = newImgSrc;
});
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
thisMode = 'dark';
} else {
thisMode = 'light';
}
window.matchMedia('(prefers-color-scheme: ' thisMode ')').addEventListener('change', e => {
console.log('CHANGE');
window.location.reload(true);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/375854.html
標籤：javascript css svg 暗模式
下一篇：SVG使用非重復模式作為填充