FIX: Add ability for category logos to switch

javascripts/discourse/initializers/color-scheme-toggler.js

@@ -21,13 +21,6 @@ export default {
     const keyValueStore = container.lookup("service:key-value-store");
     const storedOverride = keyValueStore.getItem(COLOR_SCHEME_OVERRIDE_KEY);
 
-    if (Session.currentProp("darkModeAvailable") && storedOverride) {
-      schedule("afterRender", () => {
-        // delay needed for logo override
-        colorSchemeOverride(storedOverride);
-      });
-    }
-
     window
       .matchMedia("(prefers-color-scheme: dark)")
       .addEventListener("change", () => {
@@ -39,6 +32,14 @@ export default {
     if (settings.add_color_scheme_toggle_to_header) {
       withPluginApi("0.8", (api) => {
         api.addToHeaderIcons("header-toggle-button");
+        api.onPageChange(() => {
+          if (Session.currentProp("darkModeAvailable") && storedOverride) {
+            schedule("afterRender", () => {
+              // delay needed for logo override
+              colorSchemeOverride(storedOverride);
+            });
+          }
+        });
       });
     }
   },

javascripts/discourse/lib/color-scheme-override.js

@@ -9,6 +9,9 @@ export function colorSchemeOverride(type) {
   }
 
   const logoDarkSrc = document.querySelector(".title picture source");
+  const categoryLogosDarkSrc = document.querySelectorAll(
+    ".category-logo picture source"
+  );
 
   switch (type) {
     case "dark":
@@ -20,6 +23,14 @@ export function colorSchemeOverride(type) {
         logoDarkSrc.origMedia = logoDarkSrc.media;
         logoDarkSrc.media = "all";
       }
+
+      if (categoryLogosDarkSrc) {
+        for (let index = 0; index < categoryLogosDarkSrc.length; index++) {
+          let logo = categoryLogosDarkSrc[index];
+          logo.origMedia = logo.media;
+          logo.media = "all";
+        }
+      }
       break;
     case "light":
       lightScheme.origMedia = lightScheme.media;
@@ -30,6 +41,14 @@ export function colorSchemeOverride(type) {
         logoDarkSrc.origMedia = logoDarkSrc.media;
         logoDarkSrc.media = "none";
       }
+
+      if (categoryLogosDarkSrc) {
+        for (let index = 0; index < categoryLogosDarkSrc.length; index++) {
+          let logo = categoryLogosDarkSrc[index];
+          logo.origMedia = logo.media;
+          logo.media = "none";
+        }
+      }
       break;
     default:
       if (lightScheme.origMedia) {
@@ -43,6 +62,14 @@ export function colorSchemeOverride(type) {
       if (logoDarkSrc?.origMedia) {
         logoDarkSrc.media = logoDarkSrc.origMedia;
       }
+      if (categoryLogosDarkSrc) {
+        for (let index = 0; index < categoryLogosDarkSrc.length; index++) {
+          let logo = categoryLogosDarkSrc[index];
+          if (logo?.origMedia) { 
+            logo.media = logo.origMedia;
+          }
+        }
+      }
       break;
   }
 }