Merge pull request #1746 from MastanSayyad/main

Fixed BUG "Persist Dark Mode/Light Mode Preference Across Page Refreshes"
akshitagupta15june · Jun 6, 2024 · e98a6b0 · e98a6b0
2 parents a6b9ebc + 55c934e
commit e98a6b0
Showing 1 changed file with 80 additions and 78 deletions.
diff --git a/light-dark-theme.js b/light-dark-theme.js
@@ -1,7 +1,7 @@
-class element {
+class Element {
   constructor(cssNames, lightCss, darkCss) {
-    this.cssNames = cssNames; // list with css names
-    this.eles = []; // list of elements selected for which dark CSS will apply
+    this.cssNames = cssNames;
+    this.eles = [];
     cssNames.forEach((element) => {
       document.querySelectorAll("." + element).forEach((ele) => {
         this.eles.push(ele);
@@ -10,92 +10,94 @@ class element {
 
     this.lightCss = lightCss;
     this.darkCss = darkCss;
+    this.applyTheme();
+  }
 
+  applyTheme() {
+    const isDarkMode = document.body.classList.contains("dark-theme");
     this.eles.forEach((element) => {
-      element.classList.add(darkCss);
+      if (isDarkMode) {
+        element.classList.add(this.darkCss);
+        element.classList.remove(this.lightCss);
+      } else {
+        element.classList.add(this.lightCss);
+        element.classList.remove(this.darkCss);
+      }
     });
+  }
 
-    this.toggle = function () {
-      this.eles.forEach((element) => {
-        if (element.classList.contains(darkCss)) {
-          // element.classList.remove(lightCss);
-          element.classList.remove(darkCss);
-        } else {
-          element.classList.add(darkCss);
-          // element.classList.add(lightCss);
-        }
-      });
-    };
+  toggle() {
+    this.eles.forEach((element) => {
+      element.classList.toggle(this.lightCss);
+      element.classList.toggle(this.darkCss);
+    });
   }
 }
 
-var icon = document.getElementById("switch");
+const icon = document.getElementById("switch");
 
-icon.onclick = function(){
+icon.onclick = function () {
   document.body.classList.toggle("dark-theme");
-  if(document.body.classList.contains("dark-theme")){
-    icon.className="ri-moon-line turn-red-hover dark-theme";
-  }else{
-    icon.className="ri-sun-line turn-yellow-hover light-theme";
+  if (document.body.classList.contains("dark-theme")) {
+    icon.className = "ri-moon-line turn-red-hover dark-theme";
+    localStorage.setItem("theme", "dark");
+  } else {
+    icon.className = "ri-sun-line turn-yellow-hover light-theme";
+    localStorage.setItem("theme", "light");
   }
-}
+  toggleThemeForAllElements();
+};
 
-let t1 = new element(["text_1"], "text-slate-50", "text-gray-900");
-let t2 = new element(["text_2"], "text-blue-600", "text-blue-200");
-let t3 = new element(
-  [
-    "text_3",
-    "meet-heading",
-    "main-body-section-div",
-    "turn-white-hover",
-    "text-custom-heading",
-    "text-center"
-  ],
-  "text-gray-900",
-  "text-white"
-);
-let t4 = new element(["text_4"], "text-choco", "text-white");
+const elements = [
+  new Element(["text_1"], "text-slate-50", "text-gray-900"),
+  new Element(["text_2"], "text-blue-600", "text-blue-200"),
+  new Element(
+    [
+      "text_3",
+      "meet-heading",
+      "main-body-section-div",
+      "turn-white-hover",
+      "text-custom-heading",
+      "text-center"
+    ],
+    "text-gray-900",
+    "text-white"
+  ),
+  new Element(["text_4"], "text-choco", "text-white"),
+  new Element(
+    ["bg-header-offwhite", "main-card", "b_1"],
+    "bg-slate-100",
+    "bg-amber-900"
+  ),
+  new Element(
+    ["bg_2", "meet-heading", "pet-card-flex"],
+    "bg-blue-300",
+    "bg-yellow-900"
+  ),
+  new Element(["bg_3"], "bg-blue-600", "bg-blue-200"),
+  new Element(["bg-blog"], "bg-white-200", "bg-amber-700"),
+  new Element(["mission-1"], "mission-dark", "mission-light"),
+  new Element(["mission-2"], "mission-dark", "mission-light"),
+  new Element(["navbar-item"], "turn-red-hover", "turn-yellow-hover"),
+];
 
-// let b1 = new element("bg_1", "bg-slate-50", "bg-slate-400");
-let b1 = new element(
-  ["bg-header-offwhite", "main-card", "b_1"],
-  "bg-slate-100",
-  "bg-amber-900"
-);
-// bg-header-offwhite
-let b2 = new element(
-  ["bg_2", "meet-heading", "pet-card-flex"],
-  "bg-blue-300",
-  "bg-yellow-900"
-);
-let b3 = new element(["bg_3"], "bg-blue-600", "bg-blue-200");
-
-let b4 = new element(["bg-blog"], "bg-white-200","bg-amber-700");
-
-
-let mission1 = new element(["mission-1"], "mission-dark", "mission-light");
-let mission2 = new element(["mission-2"], "mission-dark", "mission-light");
+function toggleThemeForAllElements() {
+  elements.forEach((element) => element.toggle());
+}
 
-let navbarItem = new element(
-  ["navbar-item"],
-  "turn-red-hover",
-  "turn-yellow-hover"
-);
+// Function to load theme preference on page load
+function loadThemePreference() {
+  const theme = localStorage.getItem("theme");
+  if (theme === "dark") {
+    document.body.classList.add("dark-theme");
+    icon.className = "ri-moon-line turn-red-hover dark-theme";
+  } else {
+    document.body.classList.remove("dark-theme");
+    icon.className = "ri-sun-line turn-yellow-hover light-theme";
+  }
+  // Apply the correct theme to all elements
+  elements.forEach((element) => element.applyTheme());
+}
 
-let toggler = document.querySelector("#theme-toggle");
-// let body = document.querySelector("body");
-// let heading = document.querySelector("#heading-adopt-me");
-toggler.addEventListener("click", () => {
-  t1.toggle();
-  t2.toggle();
-  t3.toggle();
-  t4.toggle();
-  b1.toggle();
-  b2.toggle();
-  b3.toggle();
-  b4.toggle();
-  navbarItem.toggle();
-  mission1.toggle();
-  mission2.toggle();
-  changeToBW();
-});
+// Load theme preference on page load
+document.addEventListener("DOMContentLoaded", loadThemePreference);