updating dark academia stylings

assets/scripts/script.js

@@ -77,19 +77,32 @@ document.addEventListener("DOMContentLoaded", () => {
 (function(){
     const root = document.documentElement;
     const storageKey = "theme";
+    const themes = ["light", "dark", "dark-academia"];
+    const labels = {
+	"light": "Light",
+	"dark": "Dark",
+	"dark-academia": "Academia"
+    };
     const saved = localStorage.getItem(storageKey);
-    if (saved === "dark" || saved === "light") {
+    if (themes.includes(saved)) {
 	root.setAttribute("data-theme", saved);
     }
     const btn = document.getElementById("theme-toggle");
     if (!btn) return;
+    const updateButton = () => {
+	const current = root.getAttribute("data-theme");
+	const label = labels[current] || "Auto";
+	btn.textContent = `Theme: ${label}`;
+	btn.setAttribute("aria-label", `Current theme: ${label}. Switch theme.`);
+    };
+    updateButton();
     btn.addEventListener("click", () => {
 	const current = root.getAttribute("data-theme");
-	const next = current === "dark" ? "light" : "dark";
-	// If no current (auto), assume we’re toggling to dark first
-	const target = current ? next : "dark";
+	const index = themes.indexOf(current);
+	const target = themes[index === -1 ? 1 : (index + 1) % themes.length];
 	root.setAttribute("data-theme", target);
 	localStorage.setItem(storageKey, target);
+	updateButton();
     });
 })();