Fix settings display when shadow is on auto and body is light or dark (#1089)

3 files changed, 15 insertions, 1 deletions

diff --git a/ext/js/app/popup.js b/ext/js/app/popup.js
index 75e2bd84..50e2fca9 100644
--- a/ext/js/app/popup.js
+++ b/ext/js/app/popup.js
@@ -24,6 +24,7 @@ import {ExtensionError} from '../core/extension-error.js';
 import {deepEqual} from '../core/utilities.js';
 import {addFullscreenChangeEventListener, computeZoomScale, convertRectZoomCoordinates, getFullscreenElement} from '../dom/document-util.js';
 import {loadStyle} from '../dom/style-util.js';
+import {checkPopupPreviewURL} from '../pages/settings/popup-preview-controller.js';
 import {ThemeController} from './theme-controller.js';
 
 /**
@@ -1014,6 +1015,10 @@ export class Popup extends EventDispatcher {
         const {general} = options;
         this._themeController.theme = general.popupTheme;
         this._themeController.outerTheme = general.popupOuterTheme;
+        this._themeController.siteOverride = checkPopupPreviewURL(optionsContext.url);
+        if (this._themeController.outerTheme === 'site' && this._themeController.siteOverride && ['dark', 'light'].includes(this._themeController.theme)) {
+            this._themeController.outerTheme = this._themeController.theme;
+        }
         this._initialWidth = general.popupWidth;
         this._initialHeight = general.popupHeight;
         this._horizontalOffset = general.popupHorizontalOffset;
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 33ab44e4..6b3838e5 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -33,6 +33,7 @@ import {ScrollElement} from '../dom/scroll-element.js';
 import {TextSourceGenerator} from '../dom/text-source-generator.js';
 import {HotkeyHelpController} from '../input/hotkey-help-controller.js';
 import {TextScanner} from '../language/text-scanner.js';
+import {checkPopupPreviewURL} from '../pages/settings/popup-preview-controller.js';
 import {DisplayContentManager} from './display-content-manager.js';
 import {DisplayGenerator} from './display-generator.js';
 import {DisplayHistory} from './display-history.js';
@@ -1161,7 +1162,7 @@ export class Display extends EventDispatcher {
             const pageTheme = historyState?.pageTheme;
             this._themeController.siteTheme = pageTheme ?? null;
 
-            if (historyState?.url?.includes('popup-preview.html')) {
+            if (checkPopupPreviewURL(historyState?.url)) {
                 pageType = 'popupPreview';
             }
         } catch (e) {
diff --git a/ext/js/pages/settings/popup-preview-controller.js b/ext/js/pages/settings/popup-preview-controller.js
index 4a09d169..da163a6a 100644
--- a/ext/js/pages/settings/popup-preview-controller.js
+++ b/ext/js/pages/settings/popup-preview-controller.js
@@ -112,3 +112,11 @@ export class PopupPreviewController {
         this._frame.contentWindow.postMessage({action, params}, this._targetOrigin);
     }
 }
+
+/**
+ * @param {string | undefined} url
+ * @returns {boolean}
+ */
+export function checkPopupPreviewURL(url) {
+    return !!(url && url.includes('popup-preview.html') && !['http:', 'https:', 'ws:', 'wss:', 'ftp:', 'data:', 'file:'].includes(new URL(url).protocol));
+}