Persist dark mode (#110)

acenturyandabit · Oct 18, 2024 · 792a433 · 792a433
1 parent 5354827
commit 792a433
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 12 deletions.
diff --git a/app/app.js b/app/app.js
@@ -1,6 +1,10 @@
 // @ts-check
 
 import { showDebugTab } from "./utils/debug.js";
+import { persistDarkMode } from "./utils/dark_mode.js";
 
 // Show the debug tab if the debug mode is enabled.
 showDebugTab();
+
+// Persist dark mode
+persistDarkMode();
diff --git a/app/utils/dark_mode.js b/app/utils/dark_mode.js
@@ -0,0 +1,73 @@
+// @ts-check
+
+/**
+ * @type {string}
+ */
+const DARK_MODE_KEY = "DARK_MODE_PREFERENCE";
+
+// Wrappin in a function to keep the check box and local storage in sync
+function setDarkMode() {
+  localStorage.setItem(DARK_MODE_KEY, "dark");
+  document.body.classList.add("dark");
+}
+
+function setLightMode() {
+  localStorage.setItem(DARK_MODE_KEY, "light");
+  document.body.classList.remove("dark");
+}
+
+/**
+ * @description
+ * Gets the dark mode input switch html element
+ * @returns {HTMLInputElement | null}
+ */
+function getDarkModeSwitch() {
+  return document.querySelector(".dark-mode-switch input");
+}
+
+/**
+ * @desription Check if user has dark mode preference
+ * We use localStorage to store user's dark mode preference
+ * If the localStorage item is not we will set the default to user's system preference
+ * @returns {boolean} - true if user has dark mode preference
+ */
+function checkDarkMode() {
+  const darkModePreference = localStorage.getItem(DARK_MODE_KEY);
+  if (!darkModePreference) {
+    // as the dark mode key is not set, we will set it to user's system preference
+    // return true if user's system preference is dark
+    return (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+  }
+  return darkModePreference === "dark";
+}
+
+/**
+ * @description
+ * Switch dark mode on or off
+ */
+function switchDarkMode() {
+  const darkModeSwitch = getDarkModeSwitch();
+  darkModeSwitch?.checked ? setDarkMode() : setLightMode();
+}
+
+/**
+ * @description
+ * If user has dark mode preference, set dark mode
+ * If user has light mode preference, set light mode
+ * If localStorage item is not set, set user's system preference
+ */
+function persistDarkMode() {
+  const darkModeSwitch = getDarkModeSwitch();
+  if (darkModeSwitch) {
+    darkModeSwitch.checked = checkDarkMode();
+  }
+  checkDarkMode() ? setDarkMode() : setLightMode();
+}
+
+/** event listener for dark mode switch */
+getDarkModeSwitch()?.addEventListener("change", switchDarkMode);
+
+export { checkDarkMode, persistDarkMode };
diff --git a/index.html b/index.html
@@ -27,7 +27,7 @@
 <body>
     <div class="dark-mode">
         <label class="dark-mode-switch">
-            <input type="checkbox" onclick="switchDarkMode()">
+            <input type="checkbox">
             <span class="slider"></span>
         </label>
     </div>
@@ -203,7 +203,6 @@ <h2>Debug Informations</h2>
         <h1> Move Timer: </h1>
         <progress value="0" max="2.5" id="timer-bar"></progress>
     </div>
-    <script>document.querySelector('.dark-mode-switch input').checked = false;</script>
     <script src="js/utils.js"></script>
     <script src="js/arcade.js"></script>
     <script src="js/piece_object.js"></script>

diff --git a/js/dark_mode.js b/js/dark_mode.js
@@ -1,13 +1,3 @@
-function switchDarkMode() {
-	darkMode = document.querySelector('.dark-mode-switch input').checked;
-	if (darkMode) {
-		document.body.classList.add("dark");
-	} else {
-		document.body.classList.remove("dark");
-	}
-}
-
-
 function projectMovement() {
 	!PH.getStatus() ? PH.enable() : PH.disable();
 }