Save dark mode preference

index.html

@@ -25,7 +25,7 @@
         <a href="http://o2o2o2yfrueii33hxjja3foegbkjckxg2fy4vr4y4pqvnk2oxqknvjqd.onion" target="_blank">Tor ( Mirror )</a>
 
         <a id="toggle">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="50px" height="50px" fill="#9F9FAA" id="moon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="50px" height="50px" fill="#9F9FAA" id="moon" display="none">
                 <path d="M13.719 1.8A8.759 8.759 0 1 1 1.8 13.719c3.335 1.867 7.633 1.387 10.469-1.449 2.837-2.837 3.318-7.134 1.45-10.47z"/>
             </svg>
 

js/toggle.js

@@ -1,30 +1,60 @@
 const moon = document.getElementById('moon');
 const sun = document.getElementById('sun');
 
-moon.addEventListener('click', () => {
+if (!document.cookie.includes('preference')) {
+    setPreference(true);
+} else {
+    const preference = document.cookie.split(';').find(cookie => cookie.includes('preference')).split('=')[1];
+    if (preference === 'true') {
+        turnLight();
+    } else {
+        turnDark();
+    }
+
+}
+
+function setPreference(value) {
+    if (typeof value === 'boolean') {
+        const expires = new Date();
+        expires.setTime(expires.getTime() + 1000 * 60 * 60); // 1 hour
+        document.cookie = `preference=${value};expires=${expires.toUTCString()};path=/`;
+    }
+}
+
+function turnLight() {
     document.documentElement.classList.add('light');
 
-    // Fade out moon and fade in sun
     moon.style.opacity = '0';
     sun.style.opacity = '1';
 
-    // After the transition ends, hide the moon and show the sun (for accessibility)
     setTimeout(() => {
         moon.style.display = 'none';
         sun.style.display = 'block';
-    }, 100); // Match the duration of the transition (100ms)
+    }
+    , 100);
+}
+
+function turnDark() {
+    document.documentElement.classList.remove('light');
+
+    sun.style.opacity = '0';
+    moon.style.opacity = '1';
+
+    setTimeout(() => {
+        sun.style.display = 'none';
+        moon.style.display = 'block';
+    }
+    , 100);
+}
+
+moon.addEventListener('click', () => {
+    document.documentElement.classList.add('light');
+    setPreference(true);
+    turnLight();
 });
 
 sun.addEventListener('click', () => {
     document.documentElement.classList.remove('light');
-
+    setPreference(false);
-    // Fade out sun and fade in moon
+    turnDark();
-    sun.style.opacity = '0';
-    moon.style.opacity = '1';
-
-    // After the transition ends, hide the sun and show the moon (for accessibility)
-    setTimeout(() => {
-        sun.style.display = 'none';
-        moon.style.display = 'block';
-    }, 100); // Match the duration of the transition (100ms)
 });