Merge pull request #297 from teamEPYC/Murtaza-TC1-patch-5

Refactor dark-light mode handling

Author: Murtaza-TC1

dark-light-mode.js

@@ -8,37 +8,52 @@ function colorModeToggle() {
     if (!isNaN(attrVal) && defaultValType === "number") return +attrVal;
     return defaultVal;
   }
+
   const htmlElement = document.documentElement;
   const computed = getComputedStyle(htmlElement);
-  let toggleEl;
-  let togglePressed = "false";
+
   const scriptTag = document.querySelector("[tr-color-vars]");
   if (!scriptTag) {
     console.warn("Script tag with tr-color-vars attribute not found");
     return;
   }
+
   let colorModeDuration = attr(0.5, scriptTag.getAttribute("duration"));
   let colorModeEase = attr("power1.out", scriptTag.getAttribute("ease"));
+
   const cssVariables = scriptTag.getAttribute("tr-color-vars");
   if (!cssVariables.length) {
     console.warn("Value of tr-color-vars attribute not found");
     return;
   }
-  let lightColors = {};
+
   let darkColors = {};
+
   cssVariables.split(",").forEach(function (item) {
-    let lightValue = computed.getPropertyValue(`--color--${item}`);
-    let darkValue = computed.getPropertyValue(`--dark--${item}`);
+    // Clean up the variable name - remove "var(" and ")" and trim whitespace
+    let cleanedItem = item.trim().replace(/^var\(/, "").replace(/\)$/, "");
+    
+    // Extract the variable name (e.g., "--polygon-v3---color--primary")
+    let lightVarName = cleanedItem;
+    
+    // Create dark variable name by replacing "--color--" with "--dark--"
+    // Adjust this based on your actual CSS variable naming convention
+    let darkVarName = cleanedItem.replace("---color--", "---dark--");
+    
+    let lightValue = computed.getPropertyValue(lightVarName);
+    let darkValue = computed.getPropertyValue(darkVarName);
+
     if (lightValue.length) {
       if (!darkValue.length) darkValue = lightValue;
-      lightColors[`--color--${item}`] = lightValue;
-      darkColors[`--color--${item}`] = darkValue;
+      darkColors[lightVarName] = darkValue;
     }
   });
-  if (!Object.keys(lightColors).length) {
+
+  if (!Object.keys(darkColors).length) {
     console.warn("No variables found matching tr-color-vars attribute value");
     return;
   }
+
   function setColors(colorObject, animate) {
     if (typeof gsap !== "undefined" && animate) {
       gsap.to(htmlElement, {
@@ -52,60 +67,19 @@ function colorModeToggle() {
       });
     }
   }
-  function goDark(dark, animate) {
-    if (dark) {
-      localStorage.setItem("dark-mode", "true");
-      htmlElement.classList.add("dark-mode");
-      setColors(darkColors, animate);
-      togglePressed = "true";
-    } else {
-      localStorage.setItem("dark-mode", "false");
-      htmlElement.classList.remove("dark-mode");
-      setColors(lightColors, animate);
-      togglePressed = "false";
-    }
-    if (typeof toggleEl !== "undefined") {
-      toggleEl.forEach(function (element) {
-        element.setAttribute("aria-pressed", togglePressed);
-      });
-    }
-  }
-  function checkPreference(e) {
-    goDark(e.matches, false);
-  }
-  const colorPreference = window.matchMedia("(prefers-color-scheme: dark)");
-  colorPreference.addEventListener("change", (e) => {
-    checkPreference(e);
-  });
-  let storagePreference = localStorage.getItem("dark-mode");
-  if (storagePreference !== null) {
-    storagePreference === "true" ? goDark(true, false) : goDark(false, false);
-  } else {
-    checkPreference(colorPreference);
+
+  function forceDarkMode() {
+    localStorage.setItem("dark-mode", "true");
+    htmlElement.classList.add("dark-mode");
+    setColors(darkColors, false);
   }
+
+  // Force dark mode immediately
+  forceDarkMode();
+
   window.addEventListener("DOMContentLoaded", (event) => {
-    toggleEl = document.querySelectorAll("[tr-color-toggle]");
-    toggleEl.forEach(function (element) {
-      element.setAttribute("aria-label", "View Dark Mode");
-      element.setAttribute("role", "button");
-      element.setAttribute("aria-pressed", togglePressed);
-    });
-    document.addEventListener("click", function (e) {
-      const targetElement = e.target.closest("[tr-color-toggle]");
-      if (targetElement) {
-        let darkClass = htmlElement.classList.contains("dark-mode");
-        darkClass ? goDark(false, true) : goDark(true, true);
-      }
-    });
-    document.addEventListener("click", function (e) {
-      const darkTrigger = e.target.closest("[tr-color-mode='dark']");
-      const lightTrigger = e.target.closest("[tr-color-mode='light']");
-      if (darkTrigger) {
-        goDark(true, true);
-      } else if (lightTrigger) {
-        goDark(false, true);
-      }
-    });
+    forceDarkMode();
   });
 }
+
 colorModeToggle();