es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Necesita cambiar el modo oscuro/claro en el sistema operativo para forzar la actualización de los archivos SVG externos.

Necesita cambiar el modo oscuro/claro en el sistema operativo para forzar la actualización de los archivos SVG externos.

12 Jul, 2023 Programación

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 principal del sitio web 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 un reinicio completo, todo funciona como se espera, 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.

Sin embargo, 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 recargar completamente las imágenes SVG en caché o de alguna manera simplemente actualizar el CSS de SVG.

Tengo un event listener configurado en Javascript que detecta correctamente un cambio en el modo del sistema operativo, pero no sé cómo hacer que los SVG se actualicen cuando cambia el modo oscuro/claro del sistema operativo. He buscado de arriba a abajo y no estoy seguro de cómo hacer esto, espero que de la manera más simple y elegante.


window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
// ¿QUÉ DEBO PONER AQUÍ PARA ACTUALIZAR LOS SVG Y REFLEJAR CORRECTAMENTE EL MODO DEL SISTEMA OPERATIVO?
});

window.location.reload(true); no recarga completamente los archivos en caché. No estoy seguro de si cache.delete es apropiado aquí o cómo lo usaría para forzar la recarga de todas las imágenes SVG (<img src="whatever.svg"/>). Tal vez haya otro método que estoy pasando por alto.

Gracias por cualquier ayuda.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para actualizar los SVG para que coincidan con el modo oscuro/claro del sistema operativo

    Una posible solución es agregar un parámetro de versión a las URL de los archivos SVG y actualizar el parámetro de versión cada vez que se cambie la preferencia de modo del sistema operativo, forzando así que los SVG se vuelvan a cargar con el CSS actualizado.

    Aquí tienes un ejemplo de implementación:

    const svgElements = document.querySelectorAll('img[src$=".svg"]');
const updatedVersion = Date.now();

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  svgElements.forEach(svg => {
    const url = svg.src;
    if (url.includes('?')) {
      svg.src = `${url}&v=${updatedVersion}`;
    } else {
      svg.src = `${url}?v=${updatedVersion}`;
    }
  });
});

    Este código escucha un cambio en la preferencia de modo del sistema operativo y luego usa el método querySelectorAll para seleccionar todos los elementos img con un atributo src que termina en “.svg”. Luego agrega un parámetro de versión (v) a la URL del archivo SVG, utilizando la marca de tiempo actual (en milisegundos) como valor de la versión.

    Esto debería forzar que los SVG se vuelvan a cargar con el CSS actualizado cada vez que se cambie la preferencia de modo del sistema operativo.

Comments are closed.