Theme updates (#2105)

* Change siteColor to siteTheme

* Fix potential null exception

* Simplify

* Update display theme assignment

* Add a data-browser-theme attribute

* Add "browser" option for theme

* Create ThemeController

* Add theme-controller.js to relevant pages

* Use ThemeController

* Simplify

* Fix 'light' being used instead of 'default'

* Update the settings values to more accurately reflect their usage

* Change default site theme in display.js

* Remove async

* Restore async for consistency

1 files changed, 14 insertions, 4 deletions

diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 02d8513f..c16f7cae 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -31,6 +31,7 @@
  * QueryParser
  * ScrollElement
  * TextScanner
+ * ThemeController
  * dynamicLoader
  */
 
@@ -114,6 +115,7 @@ class Display extends EventDispatcher {
         this._onTagClickBind = this._onTagClick.bind(this);
         this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this);
         this._onMenuButtonMenuCloseBind = this._onMenuButtonMenuClose.bind(this);
+        this._themeController = new ThemeController(document.documentElement);
 
         this._hotkeyHandler.registerActions([
             ['close',             () => { this._onHotkeyClose(); }],
@@ -210,6 +212,10 @@ class Display extends EventDispatcher {
     }
 
     async prepare() {
+        // Theme
+        this._themeController.siteTheme = 'light';
+        this._themeController.prepare();
+
         // State setup
         const {documentElement} = document;
         const {browser} = await yomichan.api.getEnvironmentInfo();
@@ -302,8 +308,7 @@ class Display extends EventDispatcher {
 
         this._updateHotkeys(options);
         this._updateDocumentOptions(options);
-        this._updateTheme(options.general.popupTheme);
-        this.setCustomCss(options.general.customPopupCss);
+        this._setTheme(options);
         this._hotkeyHelpController.setOptions(options);
         this._displayGenerator.updateHotkeys();
         this._hotkeyHelpController.setupNode(document.documentElement);
@@ -837,8 +842,13 @@ class Display extends EventDispatcher {
         data.popupActionBarLocation = `${options.general.popupActionBarLocation}`;
     }
 
-    _updateTheme(themeName) {
-        document.documentElement.dataset.theme = themeName;
+    _setTheme(options) {
+        const {general} = options;
+        const {popupTheme} = general;
+        this._themeController.theme = popupTheme;
+        this._themeController.outerTheme = general.popupOuterTheme;
+        this._themeController.updateTheme();
+        this.setCustomCss(general.customPopupCss);
     }
 
     async _findDictionaryEntries(isKanji, source, wildcardsEnabled, optionsContext) {