Remove flickering on page loads, reduce flashbangs, fix settings and popup themes applying correctly (#1088)

* Pull theme from settings on page load

* Make dark mode default

* Fix flickering on load

* Invert shadow for auto shadow theme

* Revert "Make dark mode default"

This reverts commit 4cdfc39686a9faa3ce7a620be23025f97816f5f9.

* Improve page load times

* Fix flicker on load for popup preview without breaking theming when auto is selected

* Revert shadow invert

1 files changed, 10 insertions, 2 deletions

diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 386f456b..33ab44e4 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -1152,16 +1152,24 @@ export class Display extends EventDispatcher {
     _setTheme(options) {
         const {general} = options;
         const {popupTheme} = general;
+        /** @type {string} */
+        let pageType = this._pageType;
         try {
             // eslint-disable-next-line no-underscore-dangle
-            const pageTheme = this._history._current.state?.pageTheme;
+            const historyState = this._history._current.state;
+
+            const pageTheme = historyState?.pageTheme;
             this._themeController.siteTheme = pageTheme ?? null;
+
+            if (historyState?.url?.includes('popup-preview.html')) {
+                pageType = 'popupPreview';
+            }
         } catch (e) {
             log.error(e);
         }
         this._themeController.theme = popupTheme;
         this._themeController.outerTheme = general.popupOuterTheme;
-        this._themeController.siteOverride = this._pageType === 'search';
+        this._themeController.siteOverride = pageType === 'search' || pageType === 'popupPreview';
         this._themeController.updateTheme();
         this.setCustomCss(general.customPopupCss);
     }