diff --git a/app/assets/javascripts/discourse/app/services/interface-color.js b/app/assets/javascripts/discourse/app/services/interface-color.js
index e7c3a973ffc..ff24e27c22d 100644
--- a/app/assets/javascripts/discourse/app/services/interface-color.js
+++ b/app/assets/javascripts/discourse/app/services/interface-color.js
@@ -7,6 +7,7 @@ const DARK = "dark";
 const LIGHT = "light";
 
 export default class InterfaceColor extends Service {
+  @service appEvents;
   @service siteSettings;
   @service session;
   @tracked forcedColorMode;
@@ -68,6 +69,7 @@ export default class InterfaceColor extends Service {
         darkStylesheet.media = "none";
       }
     }
+    this.appEvents.trigger("interface-color:changed", LIGHT);
   }
 
   forceDarkMode({ flipStylesheets = true } = {}) {
@@ -85,6 +87,7 @@ export default class InterfaceColor extends Service {
         darkStylesheet.media = "all";
       }
     }
+    this.appEvents.trigger("interface-color:changed", DARK);
   }
 
   removeColorModeOverride() {
@@ -94,11 +97,13 @@ export default class InterfaceColor extends Service {
     const lightStylesheet = this.#lightColorsStylesheet();
     if (lightStylesheet) {
       lightStylesheet.media = "(prefers-color-scheme: light)";
+      this.appEvents.trigger("interface-color:changed", LIGHT);
     }
 
     const darkStylesheet = this.#darkColorsStylesheet();
     if (darkStylesheet) {
       darkStylesheet.media = "(prefers-color-scheme: dark)";
+      this.appEvents.trigger("interface-color:changed", DARK);
     }
   }