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

@@ -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();

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