@radioactive-labs/plutonium 0.4.10 → 0.31.0

package/src/dist/js/plutonium.js

@@ -13151,30 +13151,49 @@
 
   // src/js/controllers/color_mode_controller.js
   var color_mode_controller_default = class extends Controller {
-    // static targets = ["trigger", "menu"]
+    static values = { current: String };
     connect() {
-      this.updateColorMode();
+      const mode = localStorage.getItem("theme") || "light";
+      this.setMode(mode);
+      this.handleStorageChange = (e4) => {
+        console.log("Storage event received in color-mode controller:", e4.key, e4.newValue, e4.oldValue);
+        if (e4.key === "theme" && e4.newValue) {
+          console.log("Updating color-mode theme to:", e4.newValue);
+          this.setMode(e4.newValue);
+        }
+      };
+      window.addEventListener("storage", this.handleStorageChange);
     }
     disconnect() {
+      window.removeEventListener("storage", this.handleStorageChange);
+    }
+    toggleMode() {
+      const current = this.currentValue || "light";
+      const next = current === "light" ? "dark" : "light";
+      this.setMode(next);
     }
-    updateColorMode() {
-      if (localStorage.theme === "dark" || !("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    setMode(mode) {
+      if (mode === "dark") {
         document.documentElement.classList.add("dark");
       } else {
         document.documentElement.classList.remove("dark");
       }
-    }
-    setLightColorMode() {
-      localStorage.theme = "light";
-      this.updateColorMode();
-    }
-    setDarkColorMode() {
-      localStorage.theme = "dark";
-      this.updateColorMode();
-    }
-    setSystemColorMode() {
-      localStorage.removeItem("theme");
-      this.updateColorMode();
+      this.currentValue = mode;
+      this.toggleIcons(mode);
+      localStorage.setItem("theme", mode);
+    }
+    toggleIcons(mode) {
+      const sun = this.element.querySelector(".color-mode-icon-light");
+      const moon = this.element.querySelector(".color-mode-icon-dark");
+      if (sun && moon) {
+        if (mode === "light") {
+          sun.classList.remove("hidden");
+          moon.classList.add("hidden");
+        } else {
+          sun.classList.add("hidden");
+          moon.classList.remove("hidden");
+        }
+      }
     }
   };