kjelsrud.dev/src/components/Footer.astro

---
const today = new Date();
---
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

<script type="module" client:load>
  const themeImage = document.getElementById('themeImage');

  const updateImageForTheme = () => {
    const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
    themeImage.src = currentTheme === 'dark' ? '/webring_dark.svg' : '/webring_light.svg';
  };

  // Initial update on page load
  updateImageForTheme();

  // Listen for theme changes if your theme toggle updates a class or attribute
  const themeToggle = document.getElementById('themeToggle');
  if (themeToggle) {
    themeToggle.addEventListener('click', updateImageForTheme);
  }
</script>

<footer class="flex justify-between py-5 mt-5 footerbg">
	<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
	<div class="flex social">
    <a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
      <iconify-icon icon="ri:github-line" width="30" height="30" />
    </a>
    <a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify">
				<iconify-icon icon="mdi:spotify" width="30" height="30" />
		</a>
    <a href="https://webring.xxiivv.com/#sid" target="_blank" rel="noopener">
      <img id="themeImage" height="30" width="30" src="/webring_light.svg" alt="XXIIVV webring"/>
    </a>
  </div>
</footer>