Add auto option to body theme (#1086)

* Add auto option to body theme

* Fix firefox bug where themes do not set correctly in settings due to getOptions failing

14 files changed, 56 insertions, 23 deletions

diff --git a/ext/css/popup-preview.css b/ext/css/popup-preview.css
index a72edc65..48a1a091 100644
--- a/ext/css/popup-preview.css
+++ b/ext/css/popup-preview.css
@@ -26,6 +26,7 @@
     --animation-duration: 0s;
 
     --example-text-color: #333333;
+    --background-color: #f8f9fa;
 }
 :root[data-loaded=true] {
     --animation-duration: 0.25s;
@@ -33,15 +34,16 @@
 
 :root[data-theme=dark] {
     --example-text-color: #d4d4d4;
+    --background-color: #1e1e1e;
 }
 
 
 html {
     transition: background-color var(--animation-duration) linear 0s, color var(--animation-duration) linear 0s;
-    background-color: rgba(255, 255, 255, 0);
+    background-color: var(--background-color);
 }
 html.dark {
-    background-color: #1e1e1e;
+    background-color: var(--background-color);
 }
 html,
 body {
diff --git a/ext/data/schemas/options-schema.json b/ext/data/schemas/options-schema.json
index f4748e69..dc230620 100644
--- a/ext/data/schemas/options-schema.json
+++ b/ext/data/schemas/options-schema.json
@@ -225,8 +225,8 @@
                                     },
                                     "popupTheme": {
                                         "type": "string",
-                                        "enum": ["light", "dark", "browser"],
-                                        "default": "browser"
+                                        "enum": ["light", "dark", "browser", "site"],
+                                        "default": "site"
                                     },
                                     "popupOuterTheme": {
                                         "type": "string",
diff --git a/ext/js/app/frontend.js b/ext/js/app/frontend.js
index 71b8d6ef..8ac27979 100644
--- a/ext/js/app/frontend.js
+++ b/ext/js/app/frontend.js
@@ -387,14 +387,14 @@ export class Frontend {
     /**
      * @param {import('text-scanner').EventArgument<'searchSuccess'>} details
      */
-    _onSearchSuccess({type, dictionaryEntries, sentence, inputInfo: {eventType, detail: inputInfoDetail}, textSource, optionsContext, detail}) {
+    _onSearchSuccess({type, dictionaryEntries, sentence, inputInfo: {eventType, detail: inputInfoDetail}, textSource, optionsContext, detail, pageTheme}) {
         this._stopClearSelectionDelayed();
         let focus = (eventType === 'mouseMove');
         if (typeof inputInfoDetail === 'object' && inputInfoDetail !== null) {
             const focus2 = inputInfoDetail.focus;
             if (typeof focus2 === 'boolean') { focus = focus2; }
         }
-        this._showContent(textSource, focus, dictionaryEntries, type, sentence, detail !== null ? detail.documentTitle : null, optionsContext);
+        this._showContent(textSource, focus, dictionaryEntries, type, sentence, detail !== null ? detail.documentTitle : null, optionsContext, pageTheme);
     }
 
     /** */
@@ -716,8 +716,9 @@ export class Frontend {
      * @param {?import('display').HistoryStateSentence} sentence
      * @param {?string} documentTitle
      * @param {import('settings').OptionsContext} optionsContext
+     * @param {'dark' | 'light'} pageTheme
      */
-    _showContent(textSource, focus, dictionaryEntries, type, sentence, documentTitle, optionsContext) {
+    _showContent(textSource, focus, dictionaryEntries, type, sentence, documentTitle, optionsContext, pageTheme) {
         const query = textSource.text();
         const {url} = optionsContext;
         /** @type {import('display').HistoryState} */
@@ -725,6 +726,7 @@ export class Frontend {
             focusEntry: 0,
             optionsContext,
             url,
+            pageTheme,
         };
         if (sentence !== null) { detailsState.sentence = sentence; }
         if (documentTitle !== null) { detailsState.documentTitle = documentTitle; }
diff --git a/ext/js/app/theme-controller.js b/ext/js/app/theme-controller.js
index c12f1113..44ff723b 100644
--- a/ext/js/app/theme-controller.js
+++ b/ext/js/app/theme-controller.js
@@ -27,14 +27,16 @@ export class ThemeController {
     constructor(element) {
         /** @type {?HTMLElement} */
         this._element = element;
-        /** @type {'light'|'dark'|'browser'} */
-        this._theme = 'light';
         /** @type {'light'|'dark'|'browser'|'site'} */
-        this._outerTheme = 'light';
+        this._theme = 'site';
+        /** @type {'light'|'dark'|'browser'|'site'} */
+        this._outerTheme = 'site';
         /** @type {?('dark'|'light')} */
         this._siteTheme = null;
         /** @type {'dark'|'light'} */
         this._browserTheme = 'light';
+        /** @type {boolean} */
+        this.siteOverride = false;
     }
 
     /**
@@ -55,7 +57,7 @@ export class ThemeController {
 
     /**
      * Gets the main theme for the content.
-     * @type {'light'|'dark'|'browser'}
+     * @type {'light'|'dark'|'browser'|'site'}
      */
     get theme() {
         return this._theme;
@@ -63,7 +65,7 @@ export class ThemeController {
 
     /**
      * Sets the main theme for the content.
-     * @param {'light'|'dark'|'browser'} value The theme value to assign.
+     * @param {'light'|'dark'|'browser'|'site'} value The theme value to assign.
      */
     set theme(value) {
         this._theme = value;
@@ -171,7 +173,7 @@ export class ThemeController {
      */
     _resolveThemeValue(theme, computedSiteTheme) {
         switch (theme) {
-            case 'site': return computedSiteTheme;
+            case 'site': return this.siteOverride ? this._browserTheme : computedSiteTheme;
             case 'browser': return this._browserTheme;
             default: return theme;
         }
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index e9fdfd9f..386f456b 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -304,7 +304,6 @@ export class Display extends EventDispatcher {
     /** */
     async prepare() {
         // Theme
-        this._themeController.siteTheme = 'light';
         this._themeController.prepare();
 
         // State setup
@@ -488,6 +487,10 @@ export class Display extends EventDispatcher {
                 this._history.pushState(state, content, url);
                 break;
         }
+
+        if (this._options) {
+            this._setTheme(this._options);
+        }
     }
 
     /**
@@ -1149,8 +1152,16 @@ export class Display extends EventDispatcher {
     _setTheme(options) {
         const {general} = options;
         const {popupTheme} = general;
+        try {
+            // eslint-disable-next-line no-underscore-dangle
+            const pageTheme = this._history._current.state?.pageTheme;
+            this._themeController.siteTheme = pageTheme ?? null;
+        } catch (e) {
+            log.error(e);
+        }
         this._themeController.theme = popupTheme;
         this._themeController.outerTheme = general.popupOuterTheme;
+        this._themeController.siteOverride = this._pageType === 'search';
         this._themeController.updateTheme();
         this.setCustomCss(general.customPopupCss);
     }
@@ -1933,6 +1944,7 @@ export class Display extends EventDispatcher {
                 url,
                 sentence: sentence !== null ? sentence : void 0,
                 documentTitle,
+                pageTheme: 'light',
             },
             content: {
                 dictionaryEntries: dictionaryEntries !== null ? dictionaryEntries : void 0,
diff --git a/ext/js/display/query-parser.js b/ext/js/display/query-parser.js
index c53208ca..344383fb 100644
--- a/ext/js/display/query-parser.js
+++ b/ext/js/display/query-parser.js
@@ -155,7 +155,7 @@ export class QueryParser extends EventDispatcher {
     /**
      * @param {import('text-scanner').EventArgument<'searchSuccess'>} details
      */
-    _onSearchSuccess({type, dictionaryEntries, sentence, inputInfo, textSource, optionsContext}) {
+    _onSearchSuccess({type, dictionaryEntries, sentence, inputInfo, textSource, optionsContext, pageTheme}) {
         this.trigger('searched', {
             textScanner: this._textScanner,
             type,
@@ -165,6 +165,7 @@ export class QueryParser extends EventDispatcher {
             textSource,
             optionsContext,
             sentenceOffset: this._getSentenceOffset(textSource),
+            pageTheme: pageTheme,
         });
     }
 
diff --git a/ext/js/language/text-scanner.js b/ext/js/language/text-scanner.js
index fdc33400..249a2eda 100644
--- a/ext/js/language/text-scanner.js
+++ b/ext/js/language/text-scanner.js
@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {ThemeController} from '../app/theme-controller.js';
 import {EventDispatcher} from '../core/event-dispatcher.js';
 import {EventListenerCollection} from '../core/event-listener-collection.js';
 import {log} from '../core/log.js';
@@ -478,6 +479,11 @@ export class TextScanner extends EventDispatcher {
                 this.setCurrentTextSource(textSource);
                 this._selectionRestoreInfo = selectionRestoreInfo;
 
+                /** @type {ThemeController} */
+                this._themeController = new ThemeController(document.documentElement);
+                this._themeController.prepare();
+                const pageTheme = this._themeController.computeSiteTheme();
+
                 this.trigger('searchSuccess', {
                     type,
                     dictionaryEntries,
@@ -486,6 +492,7 @@ export class TextScanner extends EventDispatcher {
                     textSource,
                     optionsContext,
                     detail,
+                    pageTheme,
                 });
             } else {
                 this._triggerSearchEmpty(inputInfo);
diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js
index ce29bcf1..4137d5c3 100644
--- a/ext/js/pages/action-popup-main.js
+++ b/ext/js/pages/action-popup-main.js
@@ -37,7 +37,6 @@ class DisplayController {
 
     /** */
     async prepare() {
-        this._themeController.siteTheme = 'light';
         this._themeController.prepare();
 
         const manifest = chrome.runtime.getManifest();
@@ -209,6 +208,7 @@ class DisplayController {
         void this._updatePermissionsWarnings(options);
 
         this._themeController.theme = options.general.popupTheme;
+        this._themeController.siteOverride = true;
         this._themeController.updateTheme();
     }
 
diff --git a/ext/js/pages/info-main.js b/ext/js/pages/info-main.js
index f431239f..079a8c3a 100644
--- a/ext/js/pages/info-main.js
+++ b/ext/js/pages/info-main.js
@@ -163,6 +163,7 @@ await Application.main(true, async (application) => {
     const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
     if (primaryProfile !== null) {
         themeController.theme = primaryProfile.options.general.popupTheme;
+        themeController.siteOverride = true;
         themeController.updateTheme();
     }
 
diff --git a/ext/js/pages/quick-start-guide-main.js b/ext/js/pages/quick-start-guide-main.js
index 41644f51..6a3cd39b 100644
--- a/ext/js/pages/quick-start-guide-main.js
+++ b/ext/js/pages/quick-start-guide-main.js
@@ -30,6 +30,7 @@ await Application.main(true, async (application) => {
     const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
     if (primaryProfile !== null) {
         themeController.theme = primaryProfile.options.general.popupTheme;
+        themeController.siteOverride = true;
         themeController.updateTheme();
     }
 });
diff --git a/ext/js/pages/settings/popup-preview-frame.js b/ext/js/pages/settings/popup-preview-frame.js
index 7abcfe2a..dc00d091 100644
--- a/ext/js/pages/settings/popup-preview-frame.js
+++ b/ext/js/pages/settings/popup-preview-frame.js
@@ -77,7 +77,6 @@ export class PopupPreviewFrame {
     async prepare() {
         window.addEventListener('message', this._onMessage.bind(this), false);
 
-        this._themeController.siteTheme = 'light';
         this._themeController.prepare();
 
         // Setup events
@@ -141,6 +140,7 @@ export class PopupPreviewFrame {
         options.general.popupVerticalTextPosition = 'before';
         options.scanning.selectText = false;
         this._themeController.theme = options.general.popupTheme;
+        this._themeController.siteOverride = true;
         this._themeController.updateTheme();
         return options;
     }
diff --git a/ext/js/pages/settings/settings-display-controller.js b/ext/js/pages/settings/settings-display-controller.js
index 49f7192c..e179b835 100644
--- a/ext/js/pages/settings/settings-display-controller.js
+++ b/ext/js/pages/settings/settings-display-controller.js
@@ -42,11 +42,12 @@ export class SettingsDisplayController {
         this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this);
         /** @type {ThemeController} */
         this._themeController = new ThemeController(document.documentElement);
+        /** @type {HTMLSelectElement | null}*/
+        this._themeDropdown = document.querySelector('[data-setting="general.popupTheme"]');
     }
 
     /** */
     prepare() {
-        this._themeController.siteTheme = 'light';
         this._themeController.prepare();
         void this._updateTheme();
 
@@ -92,16 +93,18 @@ export class SettingsDisplayController {
         window.addEventListener('popstate', this._onPopState.bind(this), false);
         this._updateScrollTarget();
 
-        const themeDropdown = document.querySelector('[data-setting="general.popupTheme"]');
-        if (themeDropdown) {
-            themeDropdown.addEventListener('change', this._updateTheme.bind(this), false);
+        if (this._themeDropdown) {
+            this._themeDropdown.addEventListener('change', this._updateTheme.bind(this), false);
         }
     }
 
     /** */
     async _updateTheme() {
-        const options = await this._settingsController.getOptions();
-        this._themeController.theme = options.general.popupTheme;
+        const theme = this._themeDropdown?.value;
+        if (theme === 'site' || theme === 'light' || theme === 'dark' || theme === 'browser') {
+            this._themeController.theme = theme;
+        }
+        this._themeController.siteOverride = true;
         this._themeController.updateTheme();
     }
 
diff --git a/ext/settings.html b/ext/settings.html
index 35545f7a..20472292 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -680,6 +680,7 @@
                     <div class="settings-item-group-item">
                         <div class="settings-item-group-item-label">Body</div>
                         <select data-setting="general.popupTheme" class="short-width short-height">
+                            <option value="site">Auto</option>
                             <option value="light">Light</option>
                             <option value="dark">Dark</option>
                             <option value="browser">Browser</option>
diff --git a/ext/welcome.html b/ext/welcome.html
index 0aab51e9..44212026 100644
--- a/ext/welcome.html
+++ b/ext/welcome.html
@@ -132,6 +132,7 @@
             </div>
             <div class="settings-item-right">
                 <select data-setting="general.popupTheme" class="short-width">
+                    <option value="site">Auto</option>
                     <option value="light">Light</option>
                     <option value="dark">Dark</option>
                     <option value="browser">Browser</option>