From ff2dcbaaa45a551cbbe1c866b44ba5071cc7cad9 Mon Sep 17 00:00:00 2001
From: Matthew Cool <matthewbcool@gmail.com>
Date: Thu, 23 Sep 2021 09:03:14 -0700
Subject: [PATCH 1/4] change avatar prev. background to background theme color

---
 src/react-components/avatar-preview.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/react-components/avatar-preview.js b/src/react-components/avatar-preview.js
index 4db7874b13..6524ddfc38 100644
--- a/src/react-components/avatar-preview.js
+++ b/src/react-components/avatar-preview.js
@@ -63,6 +63,26 @@ function fitBoxInFrustum(camera, box, center, margin = DEFAULT_MARGIN) {
   camera.lookAt(center);
 }
 
+function getThemeBackground() {
+  let currentTheme = APP.store.state.preferences.theme;
+  let themes = APP_CONFIG.theme.themes;
+  let defaultColor = 0xeaeaea;
+  if (currentTheme === "hubs-default") {
+    return defaultColor;
+  }
+  for (let i = 0; i < themes.length; i++) {
+    if (themes[i].id === currentTheme) {
+      let bgHex = themes[i].variables["background1-color"];
+      bgHex = `0x${bgHex.substring(1)}`;
+      if (bgHex.length !== 8) {
+        return defaultColor;
+      }
+      bgHex = parseInt(bgHex, 16);
+      return bgHex;
+    }
+  }
+}
+
 class AvatarPreview extends Component {
   static propTypes = {
     avatarGltfUrl: PropTypes.string,
@@ -112,7 +132,7 @@ class AvatarPreview extends Component {
     this.snapshotRenderer.setClearAlpha(0);
 
     this.previewRenderer = createRenderer(this.canvas);
-    this.previewRenderer.setClearColor(0xeaeaea);
+    this.previewRenderer.setClearColor(getThemeBackground());
     this.previewRenderer.setAnimationLoop(() => {
       const dt = clock.getDelta();
       this.mixer && this.mixer.update(dt);

From 57967c70a5dc2a5e395dd5697078cb20c608af0c Mon Sep 17 00:00:00 2001
From: Matthew Cool <matthewbcool@gmail.com>
Date: Thu, 23 Sep 2021 09:45:01 -0700
Subject: [PATCH 2/4] fix linter errors

---
 src/react-components/avatar-preview.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/react-components/avatar-preview.js b/src/react-components/avatar-preview.js
index 6524ddfc38..c736b9770d 100644
--- a/src/react-components/avatar-preview.js
+++ b/src/react-components/avatar-preview.js
@@ -64,9 +64,9 @@ function fitBoxInFrustum(camera, box, center, margin = DEFAULT_MARGIN) {
 }
 
 function getThemeBackground() {
-  let currentTheme = APP.store.state.preferences.theme;
-  let themes = APP_CONFIG.theme.themes;
-  let defaultColor = 0xeaeaea;
+  const currentTheme = APP.store.state.preferences.theme;
+  const themes = window.APP_CONFIG?.theme.themes;
+  const defaultColor = 0xeaeaea;
   if (currentTheme === "hubs-default") {
     return defaultColor;
   }

From dd07c3c4ef4688be1f384355809e40df294137bd Mon Sep 17 00:00:00 2001
From: Matthew Cool <matthewbcool@gmail.com>
Date: Thu, 23 Sep 2021 09:59:19 -0700
Subject: [PATCH 3/4] edit to use theme background 3 from themes instead.

---
 src/react-components/avatar-preview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/react-components/avatar-preview.js b/src/react-components/avatar-preview.js
index c736b9770d..8fe3d813bc 100644
--- a/src/react-components/avatar-preview.js
+++ b/src/react-components/avatar-preview.js
@@ -72,7 +72,7 @@ function getThemeBackground() {
   }
   for (let i = 0; i < themes.length; i++) {
     if (themes[i].id === currentTheme) {
-      let bgHex = themes[i].variables["background1-color"];
+      let bgHex = themes[i].variables["background3-color"];
       bgHex = `0x${bgHex.substring(1)}`;
       if (bgHex.length !== 8) {
         return defaultColor;

From 67bd0b6b000ead11ae99f40c8f3be1e7b75ca5b2 Mon Sep 17 00:00:00 2001
From: Matthew Cool <matthewbcool@gmail.com>
Date: Mon, 27 Sep 2021 12:11:22 -0700
Subject: [PATCH 4/4] guard against undefined values and use THREE.color to
 allow for more values

---
 src/react-components/avatar-preview.js | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/react-components/avatar-preview.js b/src/react-components/avatar-preview.js
index 8fe3d813bc..564736e358 100644
--- a/src/react-components/avatar-preview.js
+++ b/src/react-components/avatar-preview.js
@@ -64,23 +64,11 @@ function fitBoxInFrustum(camera, box, center, margin = DEFAULT_MARGIN) {
 }
 
 function getThemeBackground() {
-  const currentTheme = APP.store.state.preferences.theme;
-  const themes = window.APP_CONFIG?.theme.themes;
-  const defaultColor = 0xeaeaea;
-  if (currentTheme === "hubs-default") {
-    return defaultColor;
-  }
-  for (let i = 0; i < themes.length; i++) {
-    if (themes[i].id === currentTheme) {
-      let bgHex = themes[i].variables["background3-color"];
-      bgHex = `0x${bgHex.substring(1)}`;
-      if (bgHex.length !== 8) {
-        return defaultColor;
-      }
-      bgHex = parseInt(bgHex, 16);
-      return bgHex;
-    }
-  }
+  const currentTheme = APP?.store?.state?.preferences?.theme;
+  const themes = window.APP_CONFIG?.theme?.themes;
+  const currentThemeObject = themes?.find(t => t.id === currentTheme);
+  const previewBackgroundColor = new THREE.Color(currentThemeObject?.variables["background3-color"] || 0xeaeaea);
+  return previewBackgroundColor;
 }
 
 class AvatarPreview extends Component {