Attempt at dark mode, fix sliding anim

assets/img/moon.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   enable-background="new 0 0 512 512"
+   height="512px"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 512 512"
+   width="512px"
+   xml:space="preserve"
+   sodipodi:docname="moon.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.45647053"
+     inkscape:cx="302.31963"
+     inkscape:cy="537.82224"
+     inkscape:window-width="774"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     d="M349.852,343.15c-49.875,49.916-131.083,49.916-181,0c-49.916-49.918-49.916-131.125,0-181.021  c13.209-13.187,29.312-23.25,47.832-29.812c5.834-2.042,12.293-0.562,16.625,3.792c4.376,4.375,5.855,10.833,3.793,16.625  c-12.542,35.375-4,73.666,22.25,99.917c26.209,26.228,64.5,34.75,99.916,22.25c5.792-2.062,12.271-0.582,16.625,3.793  c4.376,4.332,5.834,10.812,3.771,16.625C373.143,313.838,363.06,329.941,349.852,343.15z M191.477,184.754  c-37.438,37.438-37.438,98.354,0,135.771c40,40.021,108.125,36.416,143-8.168c-35.959,2.25-71.375-10.729-97.75-37.084  c-26.375-26.354-39.333-61.771-37.084-97.729C196.769,179.796,194.039,182.192,191.477,184.754z"
+     fill="#1D1D1B"
+     id="path1"
+     style="fill:#ffffff" /></svg>
+<!-- Credits for this svg go to Alessio Atzeni on iconfinder -->
+

darkmode.js

@@ -0,0 +1,61 @@
+    // Check if a dark mode cookie exists, and apply dark mode if it does
+    if (getCookie("darkMode") === "true") {
+      applyDarkMode();
+    }
+
+    // Detect dark mode
+    function isDarkModeEnabled() {
+      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+
+    if (isDarkModeEnabled()) {
+      applyDarkMode();
+    } else {
+      console.log('Dark mode is not enabled.');
+    }
+
+    function toggleDarkMode() {
+      if (getCookie("darkMode") === "true") {
+        // Disable dark mode
+        setCookie("darkMode", "false", 365, "Strict");
+        applyLightMode();
+      } else {
+        // Enable dark mode
+        setCookie("darkMode", "true", 365, "Strict");
+        applyDarkMode();
+      }
+    }
+
+    function applyDarkMode() {
+      document.body.classList.add("dark-mode");
+    }
+
+    function applyLightMode() {
+      document.body.classList.remove("dark-mode");
+    }
+
+    // Helper functions for handling cookies
+    function setCookie(name, value, days, sameSite) {
+      var expires = "";
+      var sameSiteAttribute = "";
+      if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        expires = "; expires=" + date.toUTCString();
+      }
+      if (sameSite) {
+        sameSiteAttribute = "; samesite=" + sameSite;
+      }
+      document.cookie = name + "=" + (value || "") + expires + "; path=/" + sameSiteAttribute;
+    }
+
+    function getCookie(name) {
+      var nameEQ = name + "=";
+      var ca = document.cookie.split(';');
+      for (var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+      }
+      return null;
+    }

hectabitstyles.css

@@ -3,6 +3,17 @@ body, h1, p, ul, li, li2, p1 {
     margin: 0;
     padding: 0;
     list-style-type: none;
+    --button-color: rgb(118, 181, 197);
+    --sidebar-color: rgb(0, 160, 198);
+}
+
+/* Dark mode stylse */
+
+body.dark-mode {
+    color: #fff;
+    background-color: rgb(34, 34, 34);
+    --button-color: rgb(27, 105, 125);
+    --sidebar-color: rgb(14, 66, 79);
 }
 
 a {
@@ -13,7 +24,7 @@ a {
 
 .clickbutton {
     padding: 10px;
-    background-color: #00a0c6;
+    background-color: var(--button-color);
     font-size: 15px;
     border-radius: 10px;
     color: white;
@@ -33,8 +44,8 @@ body {
 
 /* Sidebar styles */
 .sidebar {
-    transition: transform 0.3s ease;
+    transition: all 0.3s ease;
-    background-color: rgb(0, 160, 198);
+    background-color: var(--sidebar-color);
     color: white;
     padding: 20px;
     width: 250px;
@@ -52,7 +63,7 @@ body {
     heigh: 20px;
     overflow-y: hidden;
     position: fixed;
-    transition: transform 0.3s ease 0s;
+    transition: all 0.3s ease 0s;
     color: rgb(118, 181, 197);
     padding: 20px;
     top: 0px;
@@ -98,8 +109,8 @@ p1 {
     border-radius: 5px;
     padding: 7px 16px;
     text-align: center;
-    background-color: rgb(118, 181, 197);
+    background-color: var(--button-color);
-    transition: background-color 0.3s ease 0s;
+    transition: all 0.3s ease 0s;
     margin: 2px;
 }
 
@@ -109,7 +120,9 @@ button {
     position: fixed;
     padding: 10px;
     color: rgb(255, 255, 255);
-    background: rgb(118, 181, 197);
+    background: var(--button-color);
+    min-width: 28px;
+    transition: all 0.3s ease;
 }
 
 button:hover {
@@ -124,7 +137,7 @@ button:hover {
 .content {
     padding: 20px;
     margin-left: 300px;
-    transition: margin-left 0.3s ease;
+    transition: all 0.3s ease;
     text-align: center;
 }
 
@@ -138,12 +151,8 @@ button:hover {
     margin-left: -20px;
 }
 
-.sidebar.display {
-    display: none;
-}
-
 .sidebar.hidden {
-    transform: translateX(-250px);
+    transform: translateX(-290px);
 }
 
 .content.expanded + .sidebar.hidden {
@@ -154,3 +163,9 @@ img {
     height: 250px;
     margin-bottom: 30px;
 }
+
+.darkmodeicon {
+    height: 8px;
+    margin-bottom: 1px;
+    scale: 2.7;
+}

index.html

@@ -10,6 +10,8 @@
 <body>
     <div class="closebar">
         <button id="sidebutton">&gt;</button>
+        <button id="sidebutton" onclick="toggleDarkMode()" style="top: 48px;">
+            <img class="darkmodeicon" alt="Toggle Dark Mode" src="/assets/img/moon.svg">
     </div>
     <div class="sidebar">
         <img src="/assets/img/hectabit.svg">
@@ -56,17 +58,9 @@
         <li><h1>Who are these contributors (so far)?</h1></li>
         <div class="spacer"></div>
         <li><p1>You can find a list of our amazing contributors</p1><a href=/halloffame> here!</a></li>
-    </div>    <script>
+    </div>
-        document.getElementById("sidebutton").addEventListener("click", function() {
+    <script src=/sidebar.js></script>
-            var sidebar = document.querySelector(".sidebar");
+    <script src=/darkmode.js></script>
-            var content = document.querySelector(".content");
-	    var closebar = document.querySelector(".closebar");
-	    closebar.classList.toggle("expanded");
-            sidebar.classList.toggle("hidden");
-            content.classList.toggle("expanded");
-            sidebar.classList.toggle("display");
-        });
-    </script>
 </body>
 </html>
 

sidebar.js

@@ -0,0 +1,8 @@
+        document.getElementById("sidebutton").addEventListener("click", function() {
+            var sidebar = document.querySelector(".sidebar");
+            var content = document.querySelector(".content");
+            var closebar = document.querySelector(".closebar");
+            closebar.classList.toggle("expanded");
+            sidebar.classList.toggle("hidden");
+            content.classList.toggle("expanded");
+        });