<a href="$context.target" aria-label="$context.arialabel">
    <img id="site-logo" alt="" class="sv-noborder sv-svg"  src="" />
</a>

<script>
      const logo = document.getElementById('site-logo');
      
      const logos = {
        light: '$context.image.url',
        dark: '$context.imageDark.url'
      };
      
      const darkModeLogo = {
         src: '$context.imageDark.url',
         alt: '$context.imageDark.alt'
      }
      
      const lightModeLogo = {
         src: '$context.image.url',
         alt: '$context.image.alt'
      }

      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

      function updateLogo(e) {
        const isDark = e.matches ?? mediaQuery.matches;
        logo.src = isDark ? darkModeLogo.src : lightModeLogo.src;
        logo.alt = isDark ? darkModeLogo.alt : lightModeLogo.alt;
      }

      updateLogo(mediaQuery);

      mediaQuery.addEventListener('change', updateLogo);
</script>