Fix dark mode checkbox shift-click in Firefox.

stefansundin · Sep 20, 2023 · 0150605 · 0150605
1 parent 89490d2
commit 0150605
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/public/js/main.js b/public/js/main.js
@@ -353,32 +353,35 @@ $(document).ready(async function() {
 
 document.addEventListener("DOMContentLoaded", () => {
   const checkbox = document.getElementById("dark-mode");
-  checkbox.addEventListener("click", (e) => {
-    if (e.isTrusted && localStorageUsable) {
-      // user initiated
-      if (e.shiftKey) {
-        localStorage.removeItem("theme");
-        e.target.checked = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        e.target.indeterminate = true;
+  const label = checkbox.parentElement.querySelector('label[for="dark-mode"]');
+  for (const el of [checkbox, label]) {
+    el.addEventListener("click", (e) => {
+      if (e.isTrusted && localStorageUsable) {
+        // user initiated
+        if (e.shiftKey) {
+          localStorage.removeItem("theme");
+          checkbox.checked = window.matchMedia("(prefers-color-scheme: dark)").matches;
+          checkbox.indeterminate = true;
+        }
+        else {
+          localStorage.setItem("theme", (checkbox.checked ? "dark" : "light"));
+        }
+      }
+
+      if (checkbox.checked) {
+        document.body.classList.add("bg-dark");
+        document.body.classList.add("text-light");
+        $(".modal-content").addClass("bg-dark");
+        $(".follow-color-scheme").removeClass("bg-light").addClass("bg-dark");
       }
       else {
-        localStorage.setItem("theme", (e.target.checked ? "dark" : "light"));
+        document.body.classList.remove("bg-dark");
+        document.body.classList.remove("text-light");
+        $(".modal-content").removeClass("bg-dark");
+        $(".follow-color-scheme").removeClass("bg-dark").addClass("bg-light");
       }
-    }
-
-    if (e.target.checked) {
-      document.body.classList.add("bg-dark");
-      document.body.classList.add("text-light");
-      $(".modal-content").addClass("bg-dark");
-      $(".follow-color-scheme").removeClass("bg-light").addClass("bg-dark");
-    }
-    else {
-      document.body.classList.remove("bg-dark");
-      document.body.classList.remove("text-light");
-      $(".modal-content").removeClass("bg-dark");
-      $(".follow-color-scheme").removeClass("bg-dark").addClass("bg-light");
-    }
-  });
+    });
+  }
 
   // Pass theme=dark in the query string to default to dark mode
   let theme = window.location.search.substring(1).split('&').find(v => v.startsWith('theme='))?.split('=')?.[1]

diff --git a/views/index.erb b/views/index.erb
@@ -327,8 +327,8 @@
     </div>
   </div>
 
-  <div class="form-check bottom-right-fixed bg-light follow-color-scheme d-none js-show">
-    <input class="form-check-input" type="checkbox" id="dark-mode" autocomplete="off" title="Reset with shift-click">
+  <div class="form-check bottom-right-fixed bg-light follow-color-scheme d-none js-show" title="Reset with shift-click">
+    <input class="form-check-input" type="checkbox" id="dark-mode" autocomplete="off">
     <label class="form-check-label" for="dark-mode">Dark mode</label>
   </div>
 </body>