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,7 +37,8 @@ export function useDarkMode() {
     [setDarkMode]
   );
 
-  useEffect(() => {
+  useEffect(
+    () => {
       const darkmodeQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
       setDarkMode(darkmodeQuery.matches);
@@ -58,7 +61,9 @@ export function useDarkMode() {
           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);