From 267ef0d73f8c1b69cfddb7b38bd12ce4714180a3 Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Wed, 10 Aug 2022 10:23:58 -0400
Subject: [PATCH] Remove update_theme event. Stash onThemeChanged listeners if
 necessary

---
 src/systems/single-action-button-system.js |  4 +-
 src/utils/theme.js                         | 58 ++++++++++++++++++----
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/systems/single-action-button-system.js b/src/systems/single-action-button-system.js
index ae9b92bf2e..1dcd172d69 100644
--- a/src/systems/single-action-button-system.js
+++ b/src/systems/single-action-button-system.js
@@ -10,7 +10,7 @@ import {
   TextButton
 } from "../bit-components";
 import { hasAnyComponent } from "../utils/bit-utils";
-import { getThemeColor } from "../utils/theme";
+import { onThemeChanged, getThemeColor } from "../utils/theme";
 import { CAMERA_MODE_INSPECT } from "./camera-system";
 import { paths } from "./userinput/paths";
 
@@ -84,7 +84,7 @@ function applyTheme() {
     textHoverColor: new THREE.Color(0xffffff)
   };
 }
-window.addEventListener("update_theme", applyTheme);
+onThemeChanged(applyTheme);
 applyTheme();
 
 const hoverComponents = [HoveredRemoteRight, HoveredRemoteLeft, HoveredHandRight, HoveredHandLeft];
diff --git a/src/utils/theme.js b/src/utils/theme.js
index 131d4eedd6..0deabda1e1 100644
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@@ -108,7 +108,7 @@ function getThemeColor(name) {
   return theme?.variables?.[name] || DEFAULT_COLORS[name];
 }
 
-function activateTheme() {
+function updateTextButtonColors() {
   const actionColor = getThemeColor("action-color");
   const actionHoverColor = getThemeColor("action-color-highlight");
 
@@ -144,28 +144,68 @@ function activateTheme() {
         `textHoverColor: #fff; textColor: #fff; backgroundColor: ${actionColor}; backgroundHoverColor: ${actionHoverColor}`
       );
   }
+}
+
+const themeChangedListeners = new Map();
+function registerThemeChangedListener(listener) {
+  window.APP.store.addEventListener("themechanged", listener);
+  const [_darkModeQuery, removeDarkModeListener] = registerDarkModeQuery(listener);
 
-  window.dispatchEvent(new CustomEvent("update_theme"));
+  themeChangedListeners.set(listener, {
+    removeListener: () => {
+      window.APP.store.removeEventListener("themechanged", listener);
+      removeDarkModeListener();
+    }
+  });
 }
 
-function onThemeChanged(themeChanged) {
-  window.APP?.store.addEventListener("themechanged", themeChanged);
-  const [_darkModeQuery, removeDarkModeListener] = registerDarkModeQuery(themeChanged);
+function removeThemeChangedListener(listener) {
+  themeChangedListeners.get(listener).removeListener();
+  themeChangedListeners.delete(listener);
+}
+
+// window.APP.store may not be available when onThemeChanged is called, so we
+// stash listeners until waitForDOMContentLoaded.
+const stashedThemeChangedListeners = new Set();
+function onThemeChanged(listener) {
+  const storeIsAvailable = !!(window.APP?.store);
+  if (storeIsAvailable) {
+    registerThemeChangedListener(listener);
+  } else {
+    stashedThemeChangedListeners.add(listener);
+  }
 
   return () => {
-    APP.store.removeEventListener("themechanged", themeChanged);
-    removeDarkModeListener();
+    if (storeIsAvailable) {
+      removeThemeChangedListener(listener);
+    } else {
+      stashedThemeChangedListeners.delete(listener);
+    }
   }
 }
 
+function registerStashedThemeChangedListeners() {
+  for (const listener of stashedThemeChangedListeners) {
+    registerThemeChangedListener(listener);
+  }
+  stashedThemeChangedListeners.clear();
+}
+
 waitForDOMContentLoaded().then(() => {
+  if (process.env.NODE) {
+    // We're running in node.js, which happens when "npm run login" is used, for example,
+    // so don't bother doing anything UI related.
+    return;
+  }
+
   if (configs.APP_CONFIG && configs.APP_CONFIG.theme && configs.APP_CONFIG.theme["dark-theme"]) {
     document.body.classList.add("dark-theme");
   } else {
     document.body.classList.add("light-theme");
   }
-  activateTheme();
-  onThemeChanged(activateTheme);
+  updateTextButtonColors();
+  onThemeChanged(updateTextButtonColors);
+  registerStashedThemeChangedListeners()
 });
 
 function applyThemeToTextButton(el, highlighted) {