fix: popout inherits exact theme via opener window inline styles
CI / lint (push) Successful in 24s
CI / security (push) Successful in 14s
CI / test (push) Successful in 30s
CI / build (push) Successful in 18s
CI / e2e (push) Failing after 38s

- 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
This commit is contained in:
2026-07-24 15:35:17 -04:00
parent 02396641f6
commit 21ee86ffa0
+17 -11
View File
@@ -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>