Merge pull request #6 from joyofrails/feat/support-multiple-dark-mode…

…-instances Handle multiple instances of darkmode switcher
joyofrails · Dec 23, 2023 · 082591c · 082591c
2 parents db97335 + bc23335
commit 082591c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/app/javascript/controllers/darkmode.js b/app/javascript/controllers/darkmode.js
@@ -3,10 +3,20 @@ import debug from 'debug';
 
 const log = debug('app:javascript:controllers:darkmode');
 
+const controllers = new Set();
+
+const broadcastDark = () => {
+  controllers.forEach((controller) => controller.handleDark());
+};
+
+const broadcastLight = () => {
+  controllers.forEach((controller) => controller.handleLight());
+};
 export default class extends Controller {
   static targets = ['description', 'darkIcon', 'lightIcon'];
 
   connect() {
+    controllers.add(this);
     log('Darkmode Controller connect');
 
     if (this.hasStoredTheme('dark') || this.prefersColorTheme('dark')) {
@@ -16,18 +26,31 @@ export default class extends Controller {
     }
   }
 
+  disconnect() {
+    controllers.delete(this);
+    log('Darkmode Controller disconnect');
+  }
+
   toggle() {
     log('Darkmode Controller toggle');
 
     if (this.hasStoredTheme('dark') || this.hasRenderedTheme('dark')) {
-      this.setLight();
-      this.storeTheme('light');
+      broadcastLight();
     } else {
-      this.setDark();
-      this.storeTheme('dark');
+      broadcastDark();
     }
   }
 
+  handleLight() {
+    this.setLight();
+    this.storeTheme('light');
+  }
+
+  handleDark() {
+    this.setDark();
+    this.storeTheme('dark');
+  }
+
   hasStoredTheme(theme) {
     return localStorage.getItem('color-theme') === theme;
   }

diff --git a/app/views/application/_footer.html.erb b/app/views/application/_footer.html.erb
@@ -59,6 +59,7 @@
       <%# <a class="" href="/terms">Terms &amp; Conditions</a>
       <a class="" href="/privacy">Privacy Policy</a>
       <a class="" href="/faq">FAQ</a> %>
+      <%= render "darkmode/switch" %>
     </small>
   </div>
 <% end %>
diff --git a/app/views/darkmode/_switch.html.erb b/app/views/darkmode/_switch.html.erb
@@ -10,11 +10,9 @@
     id="theme-toggle"
     type="button"
     class="
-      text-gray-500 dark:text-gray-400
-      hover:bg-theme-bg-hover
-      focus:ring-gray-200 dark:focus:ring-gray-700
-      focus:ring-2 focus:outline-none
-      rounded-lg text-sm p-2.5
+      text-gray-500 dark:text-gray-400 hover:bg-theme-bg-hover focus:ring-gray-200
+      dark:focus:ring-gray-700 focus:ring-2 focus:outline-none rounded-lg text-sm
+      p-2.5
     "
     aria-label="Toggle Dark Mode"
     role="button"
@@ -25,17 +23,21 @@
       fill="currentColor"
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
-    ><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+    >
+      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+    </svg>
     <svg
       data-darkmode-target="lightIcon"
       class="hidden w-5 h-5"
       fill="currentColor"
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
-    ><path
+    >
+      <path
         d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
         fill-rule="evenodd"
         clip-rule="evenodd"
-      ></path></svg>
+      ></path>
+    </svg>
   </button>
 </div>