Dark: Refactor toggle handling JS

- Use localstorage. Advantages:
  - One key=value for the entire site, without needing to specify
    `path=/`
  - No need for string splitting to parse the `key=value; ...` data
  - Suggested more widely in tutorials

  Pretty good support: https://caniuse.com/?search=localstorage

- Remove the need for JQuery, use IDs for switch and knob elements.
  - This also makes the code more robust if the page has other switch &
    knob classes!

1 files changed, 42 insertions, 72 deletions

diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
index a4b8a0aa..9a1641aa 100644
--- a/pydis_site/static/js/base/navbar.js
+++ b/pydis_site/static/js/base/navbar.js
@@ -1,94 +1,64 @@
 "use strict";
 
-const defaultCssElement = $("#bulma-css")[0];
-const darkCssElement = $("#bulma-css-dark")[0];
+const defaultTheme = "light";
+const lightCssElement = document.getElementById("bulma-css");
+const darkCssElement = document.getElementById("bulma-css-dark");
 
 function getCurrentTheme() {
-    if (document.cookie === "")
-        return "default";
-
-    return document.cookie
-        .split('; ')
-        .find(row => row.startsWith('theme='))
-        .split('=')[1];
+    const theme = localStorage.getItem("theme");
+    if (theme === null || theme === "")
+        return defaultTheme;
+    return theme;
 }
 
-function displayThemedElements() {
-    const defaultElements = Array.from($(".show-default-mode"));
-    const darkElements = Array.from($(".show-dark-mode"));
-
-    switch (getCurrentTheme()) {
-        case "":
-        case "default":
-            defaultElements.forEach(e => e.style.display = null);
-            darkElements.forEach(e => e.style.display = 'none');
+function setStyleSheets(newTheme) {
+    switch (newTheme) {
+        case "light":
+            lightCssElement.disabled = false;
+            darkCssElement.disabled = true;
             break;
         case "dark":
-            defaultElements.forEach(e => e.style.display = 'none');
-            darkElements.forEach(e => e.style.display = null);
+            lightCssElement.disabled = true;
+            darkCssElement.disabled = false;
             break;
     }
 }
 
-function setStyleSheets() {
-    switch (getCurrentTheme()) {
-        case "":
-        case "default":
-            defaultCssElement.disabled = false;
-            darkCssElement.disabled = true;
+function toggleThemeSwitch(newTheme) {
+    const switchToggle = document.getElementById("theme-switch");
+    const knob = document.getElementById("theme-knob");
+    switch (newTheme) {
+        case "light":
+            knob.classList.remove("dark");
+            knob.classList.add("light");
+            setTimeout(function() {
+                switchToggle.classList.remove("dark");
+                switchToggle.classList.add("light");
+            }, 100);
             break;
         case "dark":
-            defaultCssElement.disabled = true;
-            darkCssElement.disabled = false;
+            knob.classList.remove("light");
+            knob.classList.add("dark");
+            setTimeout(function() {
+                switchToggle.classList.remove("light");
+                switchToggle.classList.add("dark");
+            }, 100);
             break;
     }
 }
 
-function toggleThemeSwitch() {
-    let switchToggle = $(".switch")[0];
-    let knob = $(".knob")[0];
-
-    if (knob.classList.contains("dark")) {
-        knob.classList.remove("dark");
-        knob.classList.add("light");
-
-        // After 500ms, switch the icons
-        setTimeout(function() {
-            switchToggle.classList.remove("dark");
-            switchToggle.classList.add("light");
-        }, 100);
-    } else {
-        knob.classList.remove("light");
-        knob.classList.add("dark");
-
-        // After 500ms, switch the icons
-        setTimeout(function() {
-            switchToggle.classList.remove("light");
-            switchToggle.classList.add("dark");
-        }, 100);
-    }
-}
-
 // Executed when the page has finished loading.
 document.addEventListener("DOMContentLoaded", () => {
-
-    setStyleSheets();
-    displayThemedElements();
-
-    if (getCurrentTheme() === "default")
-        toggleThemeSwitch();
-
-    $('#theme-switch').on("click", () => {
-
-        // Update cookie
-        if (getCurrentTheme() === "dark") {
-            document.cookie = "theme=default";
-        } else {
-            document.cookie = "theme=dark";
-        }
-
-        setStyleSheets();
-        displayThemedElements();
-        toggleThemeSwitch();
+    const theme = getCurrentTheme()
+    setStyleSheets(theme);
+    toggleThemeSwitch(theme);
+
+    const switchToggle = document.getElementById("theme-switch");
+    switchToggle.addEventListener("click", () => {
+        const newTheme = getCurrentTheme() === "light" ? "dark" : "light";
+        console.log(newTheme);
+        localStorage.setItem("theme", newTheme);
+        setStyleSheets(newTheme);
+        toggleThemeSwitch(newTheme);
     });
 });