From 7bf892207a3b4b3ae3e186416f247a4c6a7d1696 Mon Sep 17 00:00:00 2001
From: Max Hohlfeld <maxhohlfeld@posteo.de>
Date: Mon, 2 Dec 2024 16:18:54 +0100
Subject: [PATCH] feat: complete dark mode

---
 static/utils.js | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/static/utils.js b/static/utils.js
index da3dc368..aacfdebc 100644
--- a/static/utils.js
+++ b/static/utils.js
@@ -11,7 +11,11 @@ document.addEventListener("htmx:afterSwap", () => {
 });
 
 const getCurrentTheme = () => {
-	let current = document.documentElement.getAttribute("data-theme");
+	let current = localStorage.getItem("theme");
+
+	if (current == null) {
+		current = document.documentElement.getAttribute("data-theme");
+	}
 
 	if (current === null) {
 		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -29,8 +33,25 @@ const switchTheme = () => {
 
 	document.documentElement.setAttribute("data-theme", isCurrentlyLight ? "dark" : "light");
 	document.querySelector("#theme-switcher use").setAttribute("href", `/static/feather-sprite.svg#${isCurrentlyLight ? "sun" : "moon"}`)
+	localStorage.setItem("theme", isCurrentlyLight ? "dark" : "light");
 }
 
-document.getElementById("theme-switcher")?.addEventListener("click", switchTheme);
+const observer = new MutationObserver((mutationList, observer) => {
+	for (const mut of mutationList) {
+		for (const node of mut.addedNodes) {
+			if (node.className?.includes("navbar")) {
+				console.log("found");
+				document.getElementById("theme-switcher")?.addEventListener("click", switchTheme);
+				document.querySelector("#theme-switcher use")?.setAttribute("href", `/static/feather-sprite.svg#${getCurrentTheme() === "light" ? "moon" : "sun"}`)
+			}
+		}
+	}
+});
 
-document.querySelector("#theme-switcher use")?.setAttribute("href", `/static/feather-sprite.svg#${getCurrentTheme() === "light" ? "moon" : "sun"}`)
+observer.observe(document, { childList: true, subtree: true });
+
+
+const isCurrentlyLight = getCurrentTheme() === "light";
+document.documentElement.setAttribute("data-theme", isCurrentlyLight ? "light" : "dark");
+document.querySelector("#theme-switcher use")?.setAttribute("href", `/static/feather-sprite.svg#${isCurrentlyLight ? "moon" : "sun"}`)
+document.getElementById("theme-switcher")?.addEventListener("click", switchTheme);