From cb17619c2a228066a476526498eca70db0f2d387 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sat, 25 Apr 2026 21:57:49 +0200
Subject: [PATCH] fix: resolve typescript error in theme.ts by casting to
 htmlbuttonelement

---
 static/theme.ts | 122 ++++++++++++++++++++++++++----------------------
 1 file changed, 66 insertions(+), 56 deletions(-)

diff --git a/static/theme.ts b/static/theme.ts
index c896fee..ecff721 100644
--- a/static/theme.ts
+++ b/static/theme.ts
@@ -1,74 +1,84 @@
-type Theme = 'light' | 'dark'
+type Theme = "light" | "dark";
 
-const STORAGE_KEY = 'theme'
+const STORAGE_KEY = "theme";
 
 const getSavedTheme = (): Theme => {
-  const raw = localStorage.getItem(STORAGE_KEY)
-  if (raw === 'light' || raw === 'dark') return raw
-  return 'dark'
-}
+  const raw = localStorage.getItem(STORAGE_KEY);
+  if (raw === "light" || raw === "dark") return raw;
+  return "dark";
+};
 
 const applyTheme = (theme: Theme): void => {
-   const html = document.documentElement
-   html.setAttribute('data-theme', theme)
-   localStorage.setItem(STORAGE_KEY, theme)
-   updateToggleButtons(theme)
- }
+  const html = document.documentElement;
+  html.setAttribute("data-theme", theme);
+  localStorage.setItem(STORAGE_KEY, theme);
+  updateToggleButtons(theme);
+};
 
 const cycleTheme = (): void => {
-  const current = getSavedTheme()
-  const next: Theme = current === 'light' ? 'dark' : 'light'
-  applyTheme(next)
-}
+  const current = getSavedTheme();
+  const next: Theme = current === "light" ? "dark" : "light";
+  applyTheme(next);
+};
 
 const updateToggleButtons = (theme: Theme): void => {
-   const headerBtn = document.getElementById('theme-toggle')
-   const footerBtn = document.getElementById('footer-theme-toggle')
-   
-   const updateButton = (btn: HTMLButtonElement | null): void => {
-     if (!btn) return
+  const headerBtn = document.getElementById(
+    "theme-toggle",
+  ) as HTMLButtonElement | null;
+  const footerBtn = document.getElementById(
+    "footer-theme-toggle",
+  ) as HTMLButtonElement | null;
 
-     const label = btn.querySelector('[data-theme-label]') as HTMLElement | null
-     if (label) {
-       label.textContent = theme
-     }
+  const updateButton = (btn: HTMLButtonElement | null): void => {
+    if (!btn) return;
 
-     const svg = btn.querySelector('svg')
-     if (!svg) return
+    const label = btn.querySelector("[data-theme-label]") as HTMLElement | null;
+    if (label) {
+      label.textContent = theme;
+    }
 
-     if (theme === 'light') {
-       svg.innerHTML = '<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>'
-       svg.setAttribute('stroke', 'currentColor')
-       svg.setAttribute('fill', 'none')
-     } else {
-       svg.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>'
-       svg.setAttribute('stroke', 'currentColor')
-       svg.setAttribute('fill', 'none')
-     }
-   }
+    const svg = btn.querySelector("svg");
+    if (!svg) return;
 
-   updateButton(headerBtn)
-   updateButton(footerBtn)
- }
+    if (theme === "light") {
+      svg.innerHTML =
+        '<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>';
+      svg.setAttribute("stroke", "currentColor");
+      svg.setAttribute("fill", "none");
+    } else {
+      svg.innerHTML =
+        '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
+      svg.setAttribute("stroke", "currentColor");
+      svg.setAttribute("fill", "none");
+    }
+  };
 
- const initTheme = (): void => {
-   const saved = getSavedTheme()
-   applyTheme(saved)
+  updateButton(headerBtn);
+  updateButton(footerBtn);
+};
 
-   const headerBtn = document.getElementById('theme-toggle')
-   const footerBtn = document.getElementById('footer-theme-toggle')
-   
-   if (headerBtn) {
-     headerBtn.addEventListener('click', cycleTheme)
-   }
-   
-   if (footerBtn) {
-     footerBtn.addEventListener('click', cycleTheme)
-   }
- }
+const initTheme = (): void => {
+  const saved = getSavedTheme();
+  applyTheme(saved);
 
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initTheme)
+  const headerBtn = document.getElementById(
+    "theme-toggle",
+  ) as HTMLButtonElement | null;
+  const footerBtn = document.getElementById(
+    "footer-theme-toggle",
+  ) as HTMLButtonElement | null;
+
+  if (headerBtn) {
+    headerBtn.addEventListener("click", cycleTheme);
+  }
+
+  if (footerBtn) {
+    footerBtn.addEventListener("click", cycleTheme);
+  }
+};
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initTheme);
 } else {
-  initTheme()
+  initTheme();
 }