feat: add theme switcher

static/utils.js

@@ -9,3 +9,28 @@ document.querySelectorAll("button[hx-trigger='confirmed']").forEach((value) => v
 document.addEventListener("htmx:afterSwap", () => {
 	document.querySelectorAll("button[hx-trigger='confirmed']").forEach((value) => value.addEventListener("click", fireConfirmModal));
 });
+
+const getCurrentTheme = () => {
+	let current = document.documentElement.getAttribute("data-theme");
+
+	if (current === null) {
+		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			current = "dark";
+		} else {
+			current = "light";
+		}
+	}
+
+	return current;
+}
+
+const switchTheme = () => {
+	const isCurrentlyLight = getCurrentTheme() === "light";
+
+	document.documentElement.setAttribute("data-theme", isCurrentlyLight ? "dark" : "light");
+	document.querySelector("#theme-switcher use").setAttribute("href", `/static/feather-sprite.svg#${isCurrentlyLight ? "sun" : "moon"}`)
+}
+
+document.getElementById("theme-switcher")?.addEventListener("click", switchTheme);
+
+document.querySelector("#theme-switcher use")?.setAttribute("href", `/static/feather-sprite.svg#${getCurrentTheme() === "light" ? "moon" : "sun"}`)

templates/nav.html

@@ -73,6 +73,11 @@
             </svg>
             <span>Profil</span>
           </a>
+          <button id="theme-switcher" class="button">
+            <svg class="icon">
+              <use href="/static/feather-sprite.svg#moon" />
+            </svg>
+          </button>
           <a href="/logout" class="button is-light">
             Abmelden
           </a>