From 21ee86ffa0478b83e1b34151657d3d061f0fde0b Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Fri, 24 Jul 2026 15:35:17 -0400
Subject: [PATCH] fix: popout inherits exact theme via opener window inline
 styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Copies documentElement.style.cssText from main app (has all CSS variables from themes.js setProperty)
- This propagates ANY theme (Github, Linear, Spotify, Notion, etc.) dark+light
- Fallback: localStorage obsigate-theme + obsigate-theme-mode for direct popout access
- Removes the !important hack — replaced by proper cssText inheritance
---
 frontend/popout.html | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/popout.html b/frontend/popout.html
index db66e72..5af6a49 100644
--- a/frontend/popout.html
+++ b/frontend/popout.html
@@ -4,19 +4,25 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ObsiGate - Popout</title>
-  <style id="theme-force">
-    /* Forced by inline script — bypasses any CSS loading issues */
-    html, body { background: #0f1117 !important; color: #e6edf3 !important; }
-  </style>
   <script>
+    // Copy theme from opener window (uses themes.js inline styles via setProperty)
     (function() {
-      var m = location.search.match(/theme=([^&]+)/);
-      var theme = (m && m[1]) || localStorage.getItem('obsigate-theme') || 'dark';
-      document.documentElement.setAttribute('data-theme', theme);
-      if (m && m[1]) { localStorage.setItem('obsigate-theme', theme); }
-      // Force background/text as backup regardless of CSS variable loading
-      if (theme === 'light') {
-        document.getElementById('theme-force').textContent = 'html, body { background: #ffffff !important; color: #1a1a1a !important; }';
+      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;
       }
     })();
   </script>