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

2 files changed, 13 insertions, 9 deletions

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;
         }