From b7e07208c8d08fa75c00733250ec78f214b00937 Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Wed, 6 Aug 2025 10:26:20 +0900
Subject: [PATCH] Fix: Sync Dark Mode Button State (#1708)

## Description:

This PR updates the dark mode toggle logic to synchronize the state of
the component.
Fix: https://github.com/openfrontio/OpenFrontIO/issues/1244

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I have read and accepted the CLA agreement (only required once).

## Please put your Discord username so you can be contacted if a bug or
regression is found:

aotumuri
---
 src/client/DarkModeButton.ts   | 15 +++++++++++++++
 src/client/UserSettingModal.ts |  8 ++++++++
 2 files changed, 23 insertions(+)

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");
   }