Merge remote-tracking branch 'origin/master' into bitecs-experiment

src/react-components/misc/AppLogo.js

@@ -2,15 +2,16 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import configs from "../../utils/configs";
-import { getAppLogo } from "../../utils/get-app-logo";
 import { ReactComponent as HmcLogo } from "../icons/HmcLogo.svg";
 import { isHmc } from "../../utils/isHmc";
+import { useLogo } from "../styles/theme";
 
 export function AppLogo({ className, forceConfigurableLogo }) {
+  const logo = useLogo();
   if (isHmc() && !forceConfigurableLogo) {
     return <HmcLogo className="hmc-logo" />;
   } else {
-    return <img className={className} alt={configs.translation("app-name")} src={getAppLogo()} />;
+    return <img className={className} alt={configs.translation("app-name")} src={logo} />;
   }
 }
 

src/react-components/styles/theme.js

@@ -1,5 +1,7 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
+import { getColorSchemePref } from "../../utils/get-color-scheme-pref";
+import configs from "../../utils/configs";
 
 let config = process.env.APP_CONFIG;
 
@@ -28,26 +30,40 @@ export const themes = config?.theme?.themes || [];
 function useDarkMode() {
   const [darkMode, setDarkMode] = useState(false);
 
-  useEffect(() => {
-    const darkmodeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
-    setDarkMode(darkmodeQuery.matches);
-
-    // This is a workaround for old Safari.
-    // Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use
-    // addListener() and removeListener() to observe media query lists.
-    // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
-    // We may remove this workaround when no one will use Safari 13 or before.
-    if (darkmodeQuery.addEventListener) {
-      darkmodeQuery.addEventListener("change", event => {
-        setDarkMode(event.matches);
-      });
-    } else {
-      darkmodeQuery.addListener(event => {
-        setDarkMode(event.matches);
-      });
-    }
-  }, []);
+  const changeListener = useCallback(
+    event => {
+      setDarkMode(event.matches);
+    },
+    [setDarkMode]
+  );
+
+  useEffect(
+    () => {
+      const darkmodeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+      setDarkMode(darkmodeQuery.matches);
+
+      // This is a workaround for old Safari.
+      // Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use
+      // addListener() and removeListener() to observe media query lists.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
+      // We may remove this workaround when no one will use Safari 13 or before.
+      if (darkmodeQuery.addEventListener) {
+        darkmodeQuery.addEventListener("change", changeListener);
+      } else {
+        darkmodeQuery.addListener(changeListener);
+      }
+
+      return () => {
+        if (darkmodeQuery.removeEventListener) {
+          darkmodeQuery.removeEventListener("change", changeListener);
+        } else {
+          darkmodeQuery.removeListener(changeListener);
+        }
+      };
+    },
+    [changeListener]
+  );
 
   return darkMode;
 }
@@ -101,6 +117,28 @@ export function useTheme(themeId) {
   );
 }
 
+function getCurrentTheme() {
+  if (!Array.isArray(themes)) return;
+
+  const preferredThemeId = window.APP.store?.state?.preferences?.theme;
+  if (preferredThemeId) {
+    return themes.find(t => t.id === preferredThemeId);
+  } else {
+    return getColorSchemePref();
+  }
+}
+
+function getAppLogo(darkMode) {
+  const theme = getCurrentTheme();
+  const shouldUseDarkLogo = theme ? theme.darkModeDefault : darkMode;
+  return (shouldUseDarkLogo && configs.image("logo_dark")) || configs.image("logo");
+}
+
+export function useLogo() {
+  const darkMode = useDarkMode();
+  return getAppLogo(darkMode);
+}
+
 export function useThemeFromStore(store) {
   const [themeId, setThemeId] = useState(store?.state?.preferences?.theme);
 

src/storage/store.js

@@ -12,6 +12,7 @@ const validator = new Validator();
 import { EventTarget } from "event-target-shim";
 import { fetchRandomDefaultAvatarId, generateRandomName } from "../utils/identity.js";
 import { NO_DEVICE_ID } from "../utils/media-devices-utils.js";
+import { getDefaultTheme } from "../utils/theme.js";
 
 const defaultMaterialQuality = (function() {
   const MATERIAL_QUALITY_OPTIONS = ["low", "medium", "high"];
@@ -153,7 +154,7 @@ export const SCHEMA = {
         enableAudioClipping: { type: "bool", default: false },
         audioClippingThreshold: { type: "number", default: 0.015 },
         audioPanningQuality: { type: "string", default: defaultAudioPanningQuality() },
-        theme: { type: "string", default: undefined },
+        theme: { type: "string", default: getDefaultTheme()?.name },
         cursorSize: { type: "number", default: 1 },
         nametagVisibility: { type: "string", default: "showAll" },
         nametagVisibilityDistance: { type: "number", default: 5 },

src/utils/theme.js

@@ -1,3 +1,4 @@
+import { themes } from "../react-components/styles/theme";
 import { waitForDOMContentLoaded } from "./async-utils";
 import configs from "./configs";
 
@@ -109,4 +110,8 @@ function applyThemeToTextButton(el, highlighted) {
   );
 }
 
-export { applyThemeToTextButton, getThemeColor };
+function getDefaultTheme() {
+  return themes.find(t => t.default) || themes[0];
+}
+
+export { applyThemeToTextButton, getThemeColor, getDefaultTheme };