From b09a642f6674608586c47dda79fd2127c76f3b5d Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Fri, 24 Jul 2026 15:36:00 -0400
Subject: [PATCH] fix: copy ALL CSS custom properties via getComputedStyle from
 opener
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Iterates through ALL computed CSS variables (--*) from main app
- Uses getComputedStyle which works even if setProperty was used (themes.js)
- Sets properties via setProperty on popout root — EXACT theme match
- Fallback: localStorage obsigate-theme-mode for direct popout access
- Fixed typo in --text-primary (was 'teext-primary')
---
 frontend/popout.html | 46 ++++++++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/frontend/popout.html b/frontend/popout.html
index 5af6a49..22c4066 100644
--- a/frontend/popout.html
+++ b/frontend/popout.html
@@ -5,24 +5,36 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ObsiGate - Popout</title>
   <script>
-    // Copy theme from opener window (uses themes.js inline styles via setProperty)
     (function() {
-      if (window.opener && window.opener.document.documentElement.style.cssText) {
-        // Copy all CSS variable inline styles from main app
-        document.documentElement.style.cssText = window.opener.document.documentElement.style.cssText;
-      }
-      // Fallback: read from localStorage theme key + mode
-      var themeKey = localStorage.getItem('obsigate-theme') || 'dark';
-      var themeMode = localStorage.getItem('obsigate-theme-mode') || 'dark';
-      document.documentElement.setAttribute('data-theme', themeMode);
-      // Also set inline background/color as absolute fallback
-      if (!window.opener || !window.opener.document.documentElement.style.cssText) {
-        var bg = themeMode === 'light' ? '#ffffff' : '#0f1117';
-        var fg = themeMode === 'light' ? '#1a1a1a' : '#e6edf3';
-        document.documentElement.style.setProperty('--bg-primary', bg, 'important');
-        document.documentElement.style.setProperty('--text-primary', fg, 'important');
-        document.body.style.background = bg;
-        document.body.style.color = fg;
+      var root = document.documentElement;
+      // Primary: copy ALL CSS custom properties from main app's <html> element
+      if (window.opener) {
+        try {
+          var openerRoot = window.opener.document.documentElement;
+          var cs = window.opener.getComputedStyle(openerRoot);
+          // Copy every CSS variable (--*) from main app to popout
+          for (var i = 0; i < cs.length; i++) {
+            var prop = cs[i];
+            if (prop.startsWith('--')) {
+              root.style.setProperty(prop, cs.getPropertyValue(prop));
+            }
+          }
+          // Also copy inline style as backup
+          root.style.cssText = openerRoot.style.cssText;
+          // Copy data-theme attribute
+          root.setAttribute('data-theme', openerRoot.getAttribute('data-theme') || 'dark');
+        } catch(e) {
+          // Cross-origin or security restriction — use localStorage fallback
+          var mode = localStorage.getItem('obsigate-theme-mode') || 'dark';
+          root.setAttribute('data-theme', mode);
+          root.style.setProperty('--bg-primary', mode === 'light' ? '#fff' : '#0f1117');
+          root.style.setProperty('--text-primary', mode === 'light' ? '#1a1a1a' : '#e6edf3');
+        }
+      } else {
+        var mode = localStorage.getItem('obsigate-theme-mode') || 'dark';
+        root.setAttribute('data-theme', mode);
+        root.style.setProperty('--bg-primary', mode === 'light' ? '#fff' : '#0f1117');
+        root.style.setProperty('--text-primary', mode === 'light' ? '#1a1a1a' : '#e6edf3');
       }
     })();
   </script>