Add persistent dark theme toggle

public/app.js

@@ -24,6 +24,7 @@ const sourceTitle = document.querySelector("#sourceTitle");
 const sourceList = document.querySelector("#sourceList");
 const sourceCloseButton = document.querySelector("#sourceCloseButton");
 const settingsButton = document.querySelector("#settingsButton");
+const themeToggle = document.querySelector("#themeToggle");
 const settingsModal = document.querySelector("#settingsModal");
 const settingsCloseButton = document.querySelector("#settingsCloseButton");
 const databaseModeNote = document.querySelector("#databaseModeNote");
@@ -120,6 +121,7 @@ const productFieldMap = {
 };
 
 await loadStatus();
+loadTheme();
 renderFields();
 renderTableHeader();
 setTableWidth();
@@ -167,6 +169,7 @@ sourceModal.addEventListener("click", (event) => {
   if (event.target === sourceModal) closeSourceCandidates();
 });
 settingsButton.addEventListener("click", openSettings);
+themeToggle.addEventListener("click", toggleTheme);
 settingsCloseButton.addEventListener("click", closeSettings);
 settingsModal.addEventListener("click", (event) => {
   if (event.target === settingsModal) closeSettings();
@@ -823,6 +826,19 @@ function openSettings() {
   settingsModal.hidden = false;
 }
 
+function loadTheme() {
+  const isDark = localStorage.getItem("catalog-maker:theme") === "dark";
+  document.documentElement.classList.toggle("dark", isDark);
+  themeToggle.textContent = isDark ? "Light theme" : "Dark theme";
+  themeToggle.setAttribute("aria-pressed", String(isDark));
+}
+
+function toggleTheme() {
+  const isDark = !document.documentElement.classList.contains("dark");
+  localStorage.setItem("catalog-maker:theme", isDark ? "dark" : "light");
+  loadTheme();
+}
+
 function closeSettings() {
   settingsModal.hidden = true;
 }