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] 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 {