@radioactive-labs/plutonium 0.4.10 → 0.31.0

package/src/js/controllers/color_mode_controller.js

@@ -1,40 +1,66 @@
-import { Controller } from "@hotwired/stimulus"
-
+import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="color-mode"
 export default class extends Controller {
-  // static targets = ["trigger", "menu"]
+  static values = { current: String };
 
   connect() {
-    this.updateColorMode()
+    // Set initial mode from localStorage or default
+    const mode = localStorage.getItem('theme') || "light";
+    this.setMode(mode);
+
+    // Listen for cross-tab theme changes
+    this.handleStorageChange = (e) => {
+      console.log('Storage event received in color-mode controller:', e.key, e.newValue, e.oldValue)
+      if (e.key === 'theme' && e.newValue) {
+        console.log('Updating color-mode theme to:', e.newValue)
+        this.setMode(e.newValue);
+      }
+    };
+    window.addEventListener('storage', this.handleStorageChange);
   }
 
   disconnect() {
+    // Clean up event listener
+    window.removeEventListener('storage', this.handleStorageChange);
   }
 
-  updateColorMode() {
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      document.documentElement.classList.add('dark')
+  toggleMode() {
+    const current = this.currentValue || "light";
+    const next = current === "light" ? "dark" : "light";
+    this.setMode(next);
+  }
+
+  setMode(mode) {
+    // Update html class
+    if (mode === "dark") {
+      document.documentElement.classList.add("dark");
     } else {
-      document.documentElement.classList.remove('dark')
+      document.documentElement.classList.remove("dark");
     }
-  }
 
-  setLightColorMode() {
-    // Whenever the user explicitly chooses light mode
-    localStorage.theme = 'light'
-    this.updateColorMode()
-  }
+    // Update button state
+    this.currentValue = mode;
+
+    // Show/hide icons
+    this.toggleIcons(mode);
 
-  setDarkColorMode() {
-    // Whenever the user explicitly chooses dark mode
-    localStorage.theme = 'dark'
-    this.updateColorMode()
+    // Store in localStorage to trigger storage events in other tabs
+    localStorage.setItem('theme', mode);
   }
 
-  setSystemColorMode() {
-    // Whenever the user explicitly chooses to respect the OS preference
-    localStorage.removeItem('theme')
-    this.updateColorMode()
+  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");
+      }
+    }
   }
 }