🚧 Add dark mode toggle button

assets/icons/moon.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>

assets/icons/sun.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>

layouts/partials/footer.html

@@ -16,26 +16,50 @@
       </ul>
     </nav>
   {{ end }}
-  {{/* Copyright */}}
+  <div class="flex justify-between">
-  <p class="text-sm text-neutral-400 dark:text-neutral-500">
+    <div>
-    {{- with .Site.Copyright }}
+      {{/* Copyright */}}
-      {{ . | emojify | markdownify }}
+      <p class="text-sm text-neutral-400 dark:text-neutral-500">
-    {{- else }}
+        {{- with .Site.Copyright }}
-      &copy;
+          {{ . | emojify | markdownify }}
-      {{ now.Format "2006" }}
+        {{- else }}
-      {{ .Site.Author.name | markdownify | emojify }}
+          &copy;
-    {{- end }}
+          {{ now.Format "2006" }}
-  </p>
+          {{ .Site.Author.name | markdownify | emojify }}
-  {{/* Theme attribution */}}
+        {{- end }}
-  {{ if .Site.Params.attribution | default true }}
+      </p>
-    <p class="text-xs text-neutral-300 dark:text-neutral-600">
+      {{/* Theme attribution */}}
-      {{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400"
+      {{ if .Site.Params.attribution | default true }}
-        href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
+        <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"
-      {{ $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>` }}
+            href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
-      {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
+          }}
-    </p>
+          {{ $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>` }}
-  {{ end }}
+          {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
+        </p>
+      {{ end }}
+    </div>
+    <div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
+      <button
+        id="dark-toggle"
+        onclick="setPreferredScheme('dark');"
+        oncontextmenu="setPreferredScheme('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="Switch to dark mode"
+      >
+        {{ partial "icon.html" "moon" }}
+      </button>
+      <button
+        id="light-toggle"
+        onclick="setPreferredScheme('light');"
+        oncontextmenu="setPreferredScheme('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="Switch to light mode"
+      >
+        {{ partial "icon.html" "sun" }}
+      </button>
+    </div>
+  </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,24 @@
       integrity="{{ $customStyles.Data.Integrity }}"
     />
   {{ end }}
+  <script>
+    function loadPreferredScheme() {
+      if (localStorage.preferredScheme === 'dark' || (!('preferredScheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    }
+    function setPreferredScheme(scheme) {
+      if (scheme == "default") {
+        localStorage.removeItem("preferredScheme");
+      } else {
+        localStorage.preferredScheme = scheme;
+      }
+      loadPreferredScheme();
+    }
+    loadPreferredScheme();
+  </script>
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}
     {{ partialCached "favicons.html" .Site }}

tailwind.config.js

@@ -10,7 +10,7 @@ module.exports = {
       "./themes/congo/content/**/*.{html,md}",
     ],
   },
-  darkMode: "media",
+  darkMode: "class",
   theme: {
     colors: {
       transparent: "transparent",