feat (ui): light/dark mode

app/static/app.js

@@ -1,5 +1,6 @@
 (function () {
   const STORAGE_KEY = "rename_mvp_session_id";
+  const THEME_STORAGE_KEY = "rename_mvp_theme";
 
   const state = {
     sessionId: initSessionId(),
@@ -29,6 +30,7 @@
   const el = {
     sessionMeta: document.getElementById("sessionMeta"),
     outputBox: document.getElementById("outputBox"),
+    themeToggleBtn: document.getElementById("themeToggleBtn"),
     searchInput: document.getElementById("searchInput"),
     searchDropdownBtn: document.getElementById("searchDropdownBtn"),
     searchCombobox: document.getElementById("searchCombobox"),
@@ -92,6 +94,33 @@
     return created;
   }
 
+  function getStoredTheme() {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+    return "dark";
+  }
+
+  function applyTheme(theme) {
+    const normalized = theme === "light" ? "light" : "dark";
+    document.documentElement.setAttribute("data-theme", normalized);
+    localStorage.setItem(THEME_STORAGE_KEY, normalized);
+    if (el.themeToggleBtn) {
+      const isDark = normalized === "dark";
+      // Icon represents switch action: dark -> light (sun), light -> dark (moon).
+      el.themeToggleBtn.textContent = isDark ? "☀️" : "🌙";
+      el.themeToggleBtn.setAttribute(
+        "aria-label",
+        isDark ? "Switch to light theme" : "Switch to dark theme"
+      );
+      el.themeToggleBtn.title = isDark ? "Switch to light theme" : "Switch to dark theme";
+    }
+  }
+
+  function toggleTheme() {
+    const current = document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+    applyTheme(current === "dark" ? "light" : "dark");
+  }
+
   function q(path) {
     return path.includes("?")
       ? `${path}&session_id=${encodeURIComponent(state.sessionId)}`
@@ -834,6 +863,9 @@
   }
 
   function bindEvents() {
+    if (el.themeToggleBtn) {
+      el.themeToggleBtn.addEventListener("click", toggleTheme);
+    }
     el.searchBtn.addEventListener("click", () => withHandler(doSearch, el.searchBtn));
     el.searchInput.addEventListener("focus", openRememberedDropdown);
     el.searchInput.addEventListener("click", openRememberedDropdown);
@@ -903,6 +935,7 @@
   }
 
   async function init() {
+    applyTheme(getStoredTheme());
     el.sessionMeta.textContent = `session_id: ${state.sessionId}`;
     el.modalRecursiveInput.checked = true;
     renderSelectedSeriesDetails();