Mi sitio web utiliza muchos archivos SVG externos con sus propios elementos <style> dentro de los propios archivos SVG. Tengo consultas de medios en modo oscuro dentro del CSS del sitio web principal y dentro de los estilos propios de los archivos SVG: @media (prefers-color-scheme:light) y @media (prefers-color-scheme:dark)
En la carga inicial, o en una actualización completa, todo funciona como se esperaba, tanto el CSS del sitio web como el CSS de SVG cargan los estilos apropiados dependiendo de si el sistema operativo está configurado en modo oscuro o claro.
Pero, si cambio el modo en el sistema operativo, solo se actualiza el CSS del sitio web, no el CSS del archivo SVG externo.
Por lo tanto, necesito volver a cargar las imágenes SVG almacenadas en caché por completo o, de alguna manera, simplemente actualizar el CSS SVG.
Tengo un detector de eventos configurado en javascript que detecta correctamente un cambio de modo del sistema operativo, pero no sé cómo activar los SVG para que se actualicen cuando se cambia el modo oscuro/claro del sistema operativo. He buscado por todos lados y no estoy seguro de cómo hacer esto, con suerte, de la manera más simple y elegante.
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { // WHAT GOES HERE TO REFRESH SVGs TO CORRECTLY REFLECT OS MODE? }); window.location.reload(true); no recarga los archivos almacenados en caché. No estoy seguro de si cache.delete es apropiado aquí, o cómo lo usaría para forzar una recarga de todas las imágenes SVG ( <img src="whatever.svg"/> ). Tal vez hay otro método que estoy pasando por alto.
Gracias por cualquier ayuda.
Esto funciona, unas pocas líneas de javascript. Primero, en la carga de la página, identifique todas las imágenes SVG y determine el tema prefers-color-scheme actual. Luego, detecte cuándo cambia ese tema y agregue un rompedor de caché dinámico a esos nombres de archivo, lo que obliga a los SVG a recargarse.
// 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; }); });Respuesta original actualizada el 13/12/21. Ahora cachebuster, que fuerza la recarga de los SVG, solo se llama después del cambio de modo, no en cada carga de página.
Actualización 19/12/21: esta solución no funciona con Safari (hay un error conocido por el cual Safari no respeta la consulta de medios de esquema de color preferido dentro del archivo SVG CSS). Para Safari, escribí JS adicional que detecta Safari en la carga de la página, usa el esquema de color preferido condicional anterior y, si el sistema operativo está en modo oscuro, reemplaza todos los nombres de archivo SVG de "image.svg" a "image-dark.svg" , llamando versiones claras u oscuras de cada SVG. También vuelve a cargar la página en Safari cuando cambia el tema OS oscuro/claro. Si Apple alguna vez soluciona el error, puedo optar por la solución más simple anterior.