fix(simulator): implement theme toggling, Monaco theme sync, and localStorage persistence

Author: bdbarnett

simulator/simulator.js

@@ -482,13 +482,43 @@ if "display_driver" in sys.modules:
   // Theme Switching
   // =========================================================================
 
-  function updateEditorTheme() {
-    const isLight = document.documentElement.getAttribute("data-theme") === "light";
+  const THEME_STORAGE_KEY = "pydevices-theme";
+
+  function currentTheme() {
+    return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+  }
+
+  function updateThemeUI(theme) {
+    const isLight = theme === "light";
+    const themeBtn = document.getElementById("theme-toggle");
+    if (themeBtn) {
+      themeBtn.innerHTML = isLight
+        ? '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'
+        : '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
+      themeBtn.title = isLight ? "Switch to Dark Theme" : "Switch to Light Theme";
+    }
     if (monacoEditor && typeof monaco !== "undefined") {
       monaco.editor.setTheme(isLight ? "vs" : "vs-dark");
     }
   }
 
+  function applyTheme(theme) {
+    if (theme === "light") {
+      document.documentElement.setAttribute("data-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+    }
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch (e) {}
+    updateThemeUI(theme);
+  }
+
+  function toggleTheme() {
+    const next = currentTheme() === "light" ? "dark" : "light";
+    applyTheme(next);
+  }
+
   // =========================================================================
   // DOM Event Bindings
   // =========================================================================
@@ -511,10 +541,9 @@ if "display_driver" in sys.modules:
 
     const themeToggle = document.getElementById("theme-toggle");
     if (themeToggle) {
-      themeToggle.addEventListener("click", () => {
-        setTimeout(updateEditorTheme, 50);
-      });
+      themeToggle.addEventListener("click", toggleTheme);
     }
+    updateThemeUI(currentTheme());
 
     window.addEventListener("resize", () => {
       if (monacoEditor) monacoEditor.layout();