kjelsrud.dev/src/components/BlogHeader.astro

---
import ThemeIcon from './ThemeIcon.astro';
---
<script type="module" client:load>
  const updateSvgColorForTheme = () => {
    const isDark = document.documentElement.classList.contains('dark');
    const svgPath = document.getElementById('themePath');
    if (svgPath) {
      svgPath.setAttribute('stroke', isDark ? '#cdd6f4' : '#3B2C29');
    }
  };

  updateSvgColorForTheme();

  const themeToggle = document.getElementById('themeToggle');
  if (themeToggle) {
    themeToggle.addEventListener('click', updateSvgColorForTheme);
  }
</script>
<header class="flex justify-between items-center py-5">
  <div>
    <a class="text-l font-semibold" href="/blog">
      <svg id="themeSvg" class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
        <path id="themePath" stroke="#3B2C29" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
      </svg>
    </a>
  </div>
  <ThemeIcon />
</header>