{{- if (eq .Site.Params.defaultTheme "light") }} <script> if (localStorage.getItem("pref-theme") === "dark") { document.body.classList.add('dark'); } else if (localStorage.getItem("pref-theme") === "light") { document.body.classList.remove('dark') } else { document.body.classList.remove('dark') } </script> {{- else if (eq .Site.Params.defaultTheme "dark") }} <script> if (localStorage.getItem("pref-theme") === "dark") { document.body.classList.add('dark'); } else if (localStorage.getItem("pref-theme") === "light") { document.body.classList.remove('dark') } else { document.body.classList.add('dark'); } </script> {{- else if (or (eq .Site.Params.defaultTheme "auto") (not .Site.Params.disableThemeToggle) ) }} <script> if (localStorage.getItem("pref-theme") === "dark") { document.body.classList.add('dark'); } else if (localStorage.getItem("pref-theme") === "light") { document.body.classList.remove('dark') } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.body.classList.add('dark'); } </script> {{- end }} <noscript> <style type="text/css"> .theme-toggle, .top-link { display: none; } </style> </noscript> <header class="header"> <nav class="nav"> <div class="logo"> <a href="{{ "" | absLangURL }}" accesskey="h"> {{- if .Site.Params.label.icon }} <img src="{{- .Site.Params.label.icon -}}" alt="logo" aria-label="logo" height="{{- .Site.Params.label.iconHeight | default "30px" -}}"> {{- end -}} {{- .Site.Params.label.text | default .Site.Title -}} </a> <span class="logo-switches"> {{- if (not .Site.Params.disableThemeToggle) }} <span class="theme-toggle"> <a id="theme-toggle" accesskey="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> </a> </span> {{- end}} {{ $lang := .Lang}} {{- with $.Site.Home.AllTranslations }} <span class="lang-switch"> <span>|</span> <ul> {{- range . -}} {{- if ne $lang .Lang }} <li> <a href="{{- .Permalink -}}" title="{{ .Language.LanguageName | default .Lang | humanize }}" aria-label="{{ .Language.LanguageName | default .Lang | humanize }}"> {{- if (and $.Site.Params.displayFullLangName (.Language.LanguageName)) }} {{- .Language.LanguageName | emojify | humanize -}} {{- else }} {{- .Lang | humanize -}} {{- end -}} </a> </li> {{- end -}} {{- end}} </ul> </span> {{- end }} </span> </div> {{- $currentPage := . }} <ul class="menu" id="menu" onscroll="menu_on_scroll()"> {{- range .Site.Menus.main }} {{- $menu_item_url := .URL | relLangURL }} {{- $page_url:= $currentPage.RelPermalink | relLangURL }} <li> <a href="{{ .URL | absLangURL }}"> <span {{- if eq $menu_item_url $page_url }} {{- /* the menu item links to the current page (with relLangURL) */}} class="active" {{- end }}> {{ .Name }} </span> </a> </li> {{- end -}} </ul> </nav> </header>