dark mode switch v1

assets/scss/colors.scss

@@ -1,23 +1,31 @@
-$backgroundcolor:   #ffe7d6;
-$foregroundcolor: #73464c;
-$linkcolor: #ab5675;
-$active:  #72dcbb;
+$light-bg:   #ffe7d6;
+$light-fg: #73464c;
+$light-ln: #ab5675;
+$light-active:  #72dcbb;
+
+$dark-bg: black;
+$dark-fg: white;
+$dark-ln: blue;
+$dark-active: green;
+
+
 
 body {
-    background-color: $backgroundcolor;
-    color: $foregroundcolor;
+    &.light{
+        background-color: $light-bg;
+        color: $light-fg;
+    }
+    &.dark{
+        background-color: $dark-bg;
+        color: $dark-fg;
+    }
 }
 
 a {
-    background-color: $linkcolor;
-    color: $backgroundcolor;
 }
 
 a.footer-nav-item.active{
-    color: $linkcolor;
 }
 
 footer, footer a{
-    background-color: $foregroundcolor;
-    color: $backgroundcolor;
 }

layouts/partials/footer.html

@@ -11,3 +11,4 @@
     <input type="checkbox" id="darkmode-toggle">
 </div>
 </footer>
+<script src="/js/darkmode.js"></script>

static/js/darkmode.js

@@ -0,0 +1,57 @@
+let DARKMODE = window.sessionStorage.getItem("darkmode");
+const BUTTON = document.getElementById('darkmode-toggle');
+const BODY = document.querySelector("body");
+
+if (DARKMODE === null) {
+    askForPreferredTheme();
+}
+
+function askForPreferredTheme() {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        DARKMODE = true;
+        console.log("dark mode detected!")
+    }
+    else {
+        DARKMODE = false;
+        console.log("light mode detected!")
+    }
+    save_preferences();
+}
+
+function switchMode() {
+    DARKMODE = !DARKMODE;
+    save_preferences();
+    changeDisplay();
+};
+
+function changeDisplay() {
+    console.log(DARKMODE);
+    if (DARKMODE == true) {
+        switchToDark();
+        BUTTON.checked = true
+    }
+    else {
+        switchToLight();
+        BUTTON.checked = false
+    }
+};
+
+function switchToLight() {
+    console.log("switched to light");
+    BODY.classList.remove("dark");
+    BODY.classList.add("light");
+}
+
+function switchToDark() {
+    console.log("switched to dark");
+    BODY.classList.remove("light");
+    BODY.classList.add("dark");
+}
+
+function save_preferences() {
+    sessionStorage.setItem("darkmode", DARKMODE)
+    console.log("darkmode preferences saved: ", DARKMODE)
+}
+
+changeDisplay();
+BUTTON.addEventListener("click", switchMode);