title: Need dark/light mode change in OS to force refresh of external SVG files
body: <p>My website uses many external SVG files with their own <code>&lt;style&gt;</code> elements within the SVG files themselves.  I have dark mode media queries within the main website CSS <em>and</em> within the SVG files' own styles: <code>@media (prefers-color-scheme:light)</code> and <code>@media (prefers-color-scheme:dark)</code></p>
  <p>On initial load, or a hard refresh, everything works as expected, both the website CSS and the SVG CSS load the appropriate styles depending on whether the system OS is set to dark or light mode.</p>
  <p>But, if I switch the mode in the OS, only the website CSS is updated, not the external SVG file's CSS.</p>
  <p>So, I need to either hard reload the cached SVG images in full or somehow perhaps just refresh the SVG CSS.</p>
  <p>I have an event listener set up in javascript which correctly detects an OS mode change, but I don't know how to trigger the SVGs to refresh when the OS dark/light mode is changed.  I've searched high and low and am not sure how to do this, hopefully, in the simplest, most elegant manner.</p>
  <pre><code>window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e =&gt; {
      // WHAT GOES HERE TO REFRESH SVGs TO CORRECTLY REFLECT OS MODE?
  });
  </code></pre>
  <p><code>window.location.reload(true);</code> does not hard reload cached files.  I'm not sure if <code>cache.delete</code> is appropriate here, or how I would use it for force a reload of all SVG images (<code>&lt;img src=&quot;whatever.svg&quot;/&gt;</code>).  Perhaps there is another method I'm overlooking.</p>
  <p>Thank you for any help.</p>