🔀 Merge branch 'dev' into chart

layouts/partials/article-link.html

@@ -34,7 +34,7 @@
     {{ partial "article-meta.html" . }}
   </div>
   {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
-    <div class="py-1 prose">
+    <div class="py-1 prose dark:prose-light">
       {{ .Summary | emojify }}
     </div>
   {{ end }}

layouts/partials/footer.html

@@ -16,26 +16,53 @@
       </ul>
     </nav>
   {{ end }}
-  {{/* Copyright */}}
-  <p class="text-sm text-neutral-400 dark:text-neutral-500">
-    {{- with .Site.Copyright }}
-      {{ . | emojify | markdownify }}
-    {{- else }}
-      &copy;
-      {{ now.Format "2006" }}
-      {{ .Site.Author.name | markdownify | emojify }}
-    {{- end }}
-  </p>
-  {{/* Theme attribution */}}
-  {{ if .Site.Params.attribution | default true }}
-    <p class="text-xs text-neutral-300 dark:text-neutral-600">
-      {{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400"
-        href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
-      }}
-      {{ $congo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
-      {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
-    </p>
-  {{ end }}
+  <div class="flex justify-between">
+    <div>
+      {{/* Copyright */}}
+      <p class="text-sm text-neutral-400 dark:text-neutral-500">
+        {{- with .Site.Copyright }}
+          {{ . | emojify | markdownify }}
+        {{- else }}
+          &copy;
+          {{ now.Format "2006" }}
+          {{ .Site.Author.name | markdownify | emojify }}
+        {{- end }}
+      </p>
+      {{/* Theme attribution */}}
+      {{ if .Site.Params.attribution | default true }}
+        <p class="text-xs text-neutral-300 dark:text-neutral-600">
+          {{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400"
+            href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
+          }}
+          {{ $congo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
+          {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
+        </p>
+      {{ end }}
+    </div>
+    {{/* Dark mode toggle */}}
+    {{ if and (.Site.Params.darkToggle | default false) (eq (.Site.Params.darkMode | default "auto") "auto") }}
+      <div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
+        <button
+          id="dark-toggle"
+          onclick="setPreferredAppearance('dark');"
+          oncontextmenu="setPreferredAppearance('default'); return false;"
+          class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
+          title="{{ i18n "footer.dark_appearance" }}"
+        >
+          {{ partial "icon.html" "moon" }}
+        </button>
+        <button
+          id="light-toggle"
+          onclick="setPreferredAppearance('light');"
+          oncontextmenu="setPreferredAppearance('default'); return false;"
+          class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
+          title="{{ i18n "footer.light_appearance" }}"
+        >
+          {{ partial "icon.html" "sun" }}
+        </button>
+      </div>
+    {{ end }}
+  </div>
   {{/* Extend footer - eg. for extra scripts, etc. */}}
   {{ if templates.Exists "partials/extend-footer.html" }}
     {{ partialCached "extend-footer.html" . }}

layouts/partials/head.html

@@ -62,6 +62,31 @@
       integrity="{{ $customStyles.Data.Integrity }}"
     />
   {{ end }}
+  {{ if eq (.Site.Params.darkMode | default "auto") "auto" }}
+    <script>
+      function loadPreferredAppearance() {
+        if (localStorage.preferredAppearance === "dark" || (!("preferredAppearance" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      }
+      function setPreferredAppearance(scheme) {
+        if (scheme == "default") {
+          localStorage.removeItem("preferredAppearance");
+        } else {
+          localStorage.preferredAppearance = scheme;
+        }
+        loadPreferredAppearance();
+      }
+      loadPreferredAppearance();
+      window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance);
+    </script>
+  {{ else }}
+    <script>
+      localStorage.removeItem("preferredAppearance");
+    </script>
+  {{ end }}
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}
     {{ partialCached "favicons.html" .Site }}

layouts/partials/header.html

@@ -11,6 +11,7 @@
             src="{{ $logo.RelPermalink }}"
             width="{{ div $logo.Width 2 }}"
             height="{{ div $logo.Height 2 }}"
+            class="max-w-[10rem] max-h-[10rem] object-scale-down object-left"
             alt="{{ .Site.Title }}"
           />
         </a>