Add hook to handle logo theme updates

src/react-components/misc/AppLogo.js

@@ -4,20 +4,14 @@ import PropTypes from "prop-types";
 import configs from "../../utils/configs";
 import { ReactComponent as HmcLogo } from "../icons/HmcLogo.svg";
 import { isHmc } from "../../utils/isHmc";
-import { useDarkMode } from "../styles/theme";
+import { useLogo } from "../styles/theme";
 
 export function AppLogo({ className, forceConfigurableLogo }) {
-  const darkMode = useDarkMode();
+  const logo = useLogo();
   if (isHmc() && !forceConfigurableLogo) {
     return <HmcLogo className="hmc-logo" />;
   } else {
-    return (
-      <img
-        className={className}
-        alt={configs.translation("app-name")}
-        src={(darkMode && configs.image("logo_dark")) || configs.image("logo")}
-      />
-    );
+    return <img className={className} alt={configs.translation("app-name")} src={logo} />;
   }
 }
 

src/react-components/styles/theme.js

@@ -1,5 +1,7 @@
 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;
 
@@ -35,30 +37,33 @@ export function useDarkMode() {
     [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);
-    }
+  useEffect(
+    () => {
+      const darkmodeQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
-    return () => {
-      if (darkmodeQuery.removeEventListener) {
-        darkmodeQuery.removeEventListener("change", changeListener);
+      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.removeListener(changeListener);
+        darkmodeQuery.addListener(changeListener);
       }
-    };
-  }, []);
+
+      return () => {
+        if (darkmodeQuery.removeEventListener) {
+          darkmodeQuery.removeEventListener("change", changeListener);
+        } else {
+          darkmodeQuery.removeListener(changeListener);
+        }
+      };
+    },
+    [changeListener]
+  );
 
   return darkMode;
 }
@@ -112,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);