Add a button to toggle dark mode

Also drop support for setting it through the URL query parameter

themes/patek/assets/css/main.scss

@@ -233,6 +233,15 @@ h2 a {
   }
 
 }
+.dark-mode-toggler {
+  padding: 1rem !important;
+}
+.dark-mode-toggler::before {
+  content: "🌔" !important;
+}
+.dark-mode-toggler::after {
+  content: none !important;
+}
 #content {
   min-height: 90vh;
 }

themes/patek/assets/js/dark-mode.js

@@ -1,13 +1,27 @@
-document.addEventListener("DOMContentLoaded", () => {
-	if (window.location.search.indexOf("darkmode=false") > -1) {
-		document.cookie = "darkmode=false; path=/";
-		if (document.getElementById("content") !== null) {
-			document.getElementById("content").classList.remove("dark-mode");
-		}
-	} else if (window.location.search.indexOf("darkmode=true") > -1 || document.cookie.indexOf("darkmode=true") > -1) {
-		document.cookie = "darkmode=true; path=/";
-		if (document.getElementById("content") !== null) {
-			document.getElementById("content").classList.add("dark-mode");
+function restoreDarkmode() {
+	const elem = document.getElementById("content");
+	if (elem && document.cookie.includes("dark-mode=true")) {
+		elem.classList.add("dark-mode");
+	}
+}
+
+function toggleDarkmode() {
+	const elem = document.getElementById("content");
+	if (elem) {
+		const state = elem.classList.toggle("dark-mode");
+		if (state) {
+			// 31536000 = 1 year; not setting max-age would make it session bound
+			document.cookie = "dark-mode=true; path=/; max-age=31536000; secure; samesite=strict";
+		} else {
+			// Delete the cookie by immediately expiring it
+			document.cookie = "dark-mode=; path=/; max-age=0; secure; samesite=strict";
 		}
 	}
+}
+
+document.addEventListener("DOMContentLoaded", restoreDarkmode);
+document.addEventListener("DOMContentLoaded", () => {
+	for (const toggler of document.getElementsByClassName("dark-mode-toggler")) {
+		toggler.addEventListener("click", toggleDarkmode);
+	}
 });

themes/patek/layouts/partials/menu.html

@@ -37,6 +37,8 @@
                 {{ end }}
             </div>
             <div class="navbar-end">
+                <div class="navbar-item is-hoverable dark-mode-toggler navbar-link" role="button">
+                </div>
                 <div class="navbar-item has-dropdown is-hoverable">
                     <span class="navbar-link">{{ .Site.Language.LanguageName }}</span>
                     <div class="navbar-dropdown">