{{- /* Sun/moon theme toggle. Only loaded/rendered when site.Params.themeToggle = true.
       Sun shown in dark mode (target = light). Moon shown in light mode (target = dark). */ -}}
<button type="button" class="theme-toggle"
        data-bonsai-theme-toggle
        aria-label="{{ with i18n "theme_toggle_label" }}{{ . }}{{ else }}Toggle light and dark theme{{ end }}"
        aria-pressed="false"
        title="{{ with i18n "theme_toggle_title" }}{{ . }}{{ else }}Toggle theme{{ end }}">
  <svg class="theme-toggle__sun" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
    <circle cx="12" cy="12" r="4" fill="currentColor"/>
    <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
      <line x1="12" y1="2" x2="12" y2="5"/>
      <line x1="12" y1="19" x2="12" y2="22"/>
      <line x1="2" y1="12" x2="5" y2="12"/>
      <line x1="19" y1="12" x2="22" y2="12"/>
      <line x1="4.9" y1="4.9" x2="7" y2="7"/>
      <line x1="17" y1="17" x2="19.1" y2="19.1"/>
      <line x1="4.9" y1="19.1" x2="7" y2="17"/>
      <line x1="17" y1="7" x2="19.1" y2="4.9"/>
    </g>
  </svg>
  <svg class="theme-toggle__moon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
    <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" fill="currentColor"/>
  </svg>
</button>