PaperModX/layouts/partials/header.html

<script data-no-instant>
function switchTheme(theme) {
  switch (theme) {
    case 'light':
      document.body.classList.remove('dark');
      break;
    case 'dark':
      document.body.classList.add('dark');
      break;
    // auto
    default:
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
      }
  }
}

function isDarkTheme() {
  return document.body.className.includes("dark");
}

function getPrefTheme() {
  return localStorage.getItem("pref-theme");
}

function setPrefTheme(theme) {
  switchTheme(theme)
  localStorage.setItem("pref-theme", theme);
}

const toggleThemeCallbacks = {}
toggleThemeCallbacks['main'] = (isDark) => {
  // console.log('window toggle-theme 1')
  if (isDark) {
    setPrefTheme('light');
  } else {
    setPrefTheme('dark');
  }
}

// listen to set-theme event,
// because window is never changed by InstantClick,
// we add the listener to window to ensure the event is always received
window.addEventListener('toggle-theme', function() {
  // console.log('window toggle-theme')
  const isDark = isDarkTheme()
  for (const key in toggleThemeCallbacks) {
    toggleThemeCallbacks[key](isDark)
  }
});

// this function is used as the event listener for toggle-theme button click
function toggleThemeListener() {
  // console.log('click theme-toggle')
  window.dispatchEvent(new CustomEvent('toggle-theme'));
}

</script>
<script>
  // load theme, as early as possible
  (function() {
    const defaultTheme = '{{ site.Params.defaultTheme | default "light" }}';
    const prefTheme = getPrefTheme();
    const theme = prefTheme ? prefTheme : defaultTheme;

    switchTheme(theme);
  })();
</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            {{- $label_text := (site.Params.logo.text | default site.Title) }}
            {{- if site.Title }}
            <a href="{{ "" | absURL }}" accesskey="h" title="{{ $label_text }} (Alt + H)">
                {{- if site.Params.logo.icon }}
                {{- $img := resources.Get site.Params.logo.icon }}
                {{- if $img }}
                    {{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
                    {{- if hugo.IsExtended -}}
                        {{- $processableFormats = $processableFormats | append "webp" -}}
                    {{- end -}}
                    {{- $prod := (hugo.IsProduction | or (eq site.Params.env "production")) }}
                    {{- if and (in $processableFormats $img.MediaType.SubType) (eq $prod true)}}
                        {{- if site.Params.logo.iconHeight }}
                            {{- $img = $img.Resize (printf "x%d" site.Params.logo.iconHeight) }}
                        {{ else }}
                            {{- $img = $img.Resize "x30" }}
                        {{- end }}
                    {{- end }}
                    <img src="{{ $img.Permalink }}" alt="logo" aria-label="logo"
                        height="{{- site.Params.logo.iconHeight | default "30" -}}">
                {{- else }}
                <img src="{{- site.Params.logo.icon | absURL -}}" alt="logo" aria-label="logo"
                    height="{{- site.Params.logo.iconHeight | default "30" -}}">
                {{- end -}}
                {{- end -}}
                {{- $label_text -}}
            </a>
            {{- end }}
            <span class="logo-switches">
                {{- if (not site.Params.disableThemeToggle) }}
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
                {{- end }}
            </span>
        </div>
        {{- $currentPage := . }}
        <ul id="menu">
            {{- range site.Menus.main }}
            {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL)) | absURL }}
            {{- $page_url:= $currentPage.Permalink }}
            {{- $is_search := eq (site.GetPage .KeyName).Layout `search` }}
            <li>
                <a href="{{ $menu_item_url }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
                {{- if $is_search -}}data-no-instant{{- end -}}
                {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}
                {{- if strings.HasPrefix $page_url $menu_item_url }} class="active" {{- end }}
                {{- if .Params.External }} target="_blank" {{- end }}
                >
                    {{- .Pre }}
                    {{- .Name -}}
                    {{ .Post -}}
                    {{- if .Params.External }}<span class="external-link">{{ safeHTML (index $.Site.Data.svg "external-link") }}</span>{{- end }}
                </a>
            </li>
            {{- end }}
        </ul>
    </nav>
</header>