diff --git a/src/client/DarkModeButton.ts b/src/client/DarkModeButton.ts
index 65071408f..5284ca323 100644
--- a/src/client/DarkModeButton.ts
+++ b/src/client/DarkModeButton.ts
@@ -11,6 +11,21 @@ export class DarkModeButton extends LitElement {
     return this;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("dark-mode-changed", this.handleDarkModeChanged);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("dark-mode-changed", this.handleDarkModeChanged);
+  }
+
+  private handleDarkModeChanged = (e: Event) => {
+    const event = e as CustomEvent<{ darkMode: boolean }>;
+    this.darkMode = event.detail.darkMode;
+  };
+
   toggleDarkMode() {
     this.userSettings.toggleDarkMode();
     this.darkMode = this.userSettings.darkMode();
diff --git a/src/client/UserSettingModal.ts b/src/client/UserSettingModal.ts
index 14f79c190..d55f644ea 100644
--- a/src/client/UserSettingModal.ts
+++ b/src/client/UserSettingModal.ts
@@ -95,6 +95,14 @@ export class UserSettingModal extends LitElement {
       document.documentElement.classList.remove("dark");
     }
 
+    this.dispatchEvent(
+      new CustomEvent("dark-mode-changed", {
+        detail: { darkMode: enabled },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
     console.log("🌙 Dark Mode:", enabled ? "ON" : "OFF");
   }