feat (ui) CSS

webui/html/app.js

@@ -36,6 +36,39 @@ let batchMoveState = {
   destinationBase: "",
   count: 0,
 };
+const THEME_STORAGE_KEY = "webmanager-theme";
+
+function preferredTheme() {
+  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+  if (stored === "light" || stored === "dark") {
+    return stored;
+  }
+  if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+    return "light";
+  }
+  return "dark";
+}
+
+function applyTheme(theme) {
+  const nextTheme = theme === "light" ? "light" : "dark";
+  document.documentElement.dataset.theme = nextTheme;
+  const icon = document.getElementById("theme-toggle-icon");
+  const button = document.getElementById("theme-toggle");
+  if (icon) {
+    icon.textContent = nextTheme === "dark" ? "☾" : "☀";
+  }
+  if (button) {
+    button.setAttribute("aria-label", `Switch to ${nextTheme === "dark" ? "light" : "dark"} mode`);
+    button.setAttribute("title", `Switch to ${nextTheme === "dark" ? "light" : "dark"} mode`);
+  }
+}
+
+function toggleTheme() {
+  const current = document.documentElement.dataset.theme === "light" ? "light" : "dark";
+  const next = current === "dark" ? "light" : "dark";
+  applyTheme(next);
+  window.localStorage.setItem(THEME_STORAGE_KEY, next);
+}
 
 function paneState(pane) {
   return state.panes[pane];
@@ -1420,6 +1453,7 @@ function setupEvents() {
   setupPaneEvents("left");
   setupPaneEvents("right");
   document.addEventListener("keydown", handleKeyboardShortcuts);
+  document.getElementById("theme-toggle").onclick = toggleTheme;
   document.getElementById("view-btn").onclick = openViewer;
   document.getElementById("edit-btn").onclick = openEditor;
   document.getElementById("rename-btn").onclick = renameSelected;
@@ -1498,6 +1532,7 @@ function setupEvents() {
 
 async function init() {
   setError("actions-error", "");
+  applyTheme(preferredTheme());
   setActivePane("left");
   setupEvents();
   await Promise.all([loadBrowsePane("left"), loadBrowsePane("right")]);