feat: add theme synchronization to popout windows with localStorage and cross-window storage events

frontend/popout.html

@@ -4,8 +4,12 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ObsiGate - Popout</title>
+  <script>
+    document.documentElement.setAttribute('data-theme', localStorage.getItem('obsigate-theme') || 'dark');
+  </script>
   <link rel="stylesheet" href="/static/style.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme-dark">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" id="hljs-theme-light" disabled>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
   <script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js"></script>
   <style>
@@ -40,6 +44,22 @@
   </div>
 
   <script>
+    function applyTheme(theme) {
+      document.documentElement.setAttribute('data-theme', theme);
+
+      const darkSheet = document.getElementById('hljs-theme-dark');
+      const lightSheet = document.getElementById('hljs-theme-light');
+      if (darkSheet && lightSheet) {
+        darkSheet.disabled = theme !== 'dark';
+        lightSheet.disabled = theme !== 'light';
+      }
+    }
+
+    function initTheme() {
+      const saved = localStorage.getItem('obsigate-theme') || 'dark';
+      applyTheme(saved);
+    }
+
     async function initPopout() {
       const pathParts = window.location.pathname.split('/');
       const vault = decodeURIComponent(pathParts[2]);
@@ -363,7 +383,13 @@
       return fmSection;
     }
 
-    window.onload = initPopout;
+    initTheme();
+    window.addEventListener('storage', (event) => {
+      if (event.key === 'obsigate-theme' && event.newValue) {
+        applyTheme(event.newValue);
+      }
+    });
+    initPopout();
   </script>
 </body>
 </html>