hugo-paper/layouts/partials/header.html

<header class="header">
  {{ if .IsHome }}
  <h1 class="logo">
    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-theme"></a>
  </h1>
  {{ else }}
  <p class="logo">
    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-theme"></a>
  </p>
  {{ end }}

  <script>
    let bodyClass = document.body.classList;
    let buttonDark = document.querySelector('.btn-theme');
    let schemeDark = window.matchMedia('(prefers-color-scheme: dark)');

    let setDark = () => {
      bodyClass.add('dark');
      localStorage.setItem('dark', 'true');
    };
    let setLight = () => {
      bodyClass.remove('dark');
      localStorage.removeItem('dark');
    };

    if (schemeDark.matches || localStorage.getItem('dark')) setDark();
    requestAnimationFrame(() => {
      bodyClass.remove('not-ready');
    });

    buttonDark.addEventListener('click', () => {
      bodyClass.contains('dark') ? setLight() : setDark();
    });
    schemeDark.addEventListener('change', (event) => {
      event.matches ? setDark() : setLight();
    });
  </script>

  {{ $url := .RelPermalink }}<!---->
  {{ with site.Menus.main }}
  <nav class="menu">
    {{ range . }}
    <a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
    {{ end }}
  </nav>
  {{ end }}<!---->

  {{ with $.Scratch.Get "social-list" }}
  <nav class="social">
    {{ range . }}
    <a
      class="{{ . }}"
      style="--url: url(./{{ . }}.svg)"
      href="https://{{ . }}.com/{{ site.Params.Get . }}"
      target="_blank"
    ></a>
    {{ end }}
  </nav>
  {{ end }}
</header>