Merge pull request #4666 from mozilla/feature/theme-avatar-preview

change avatar preview background to background theme color

src/react-components/avatar-preview.js

@@ -63,6 +63,14 @@ function fitBoxInFrustum(camera, box, center, margin = DEFAULT_MARGIN) {
   camera.lookAt(center);
 }
 
+function getThemeBackground() {
+  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 {
   static propTypes = {
     avatarGltfUrl: PropTypes.string,
@@ -112,7 +120,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);