1 files changed, 94 insertions, 0 deletions
diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
new file mode 100644
index 00000000..b49c86b1
--- /dev/null
+++ b/pydis_site/static/js/base/navbar.js
@@ -0,0 +1,94 @@
+"use strict";
+
+const defaultCssElement = $("#bulma-css")[0];
+const darkCssElement = $("#bulma-css-dark")[0];
+
+function getCurrentTheme() {
+    if (document.cookie === "")
+        return "default";
+
+    return document.cookie
+        .split('; ')
+        .find(row => row.startsWith('theme='))
+        .split('=')[1];
+}
+
+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');
+            break;
+        case "dark":
+            defaultElements.forEach(e => e.style.display = 'none');
+            darkElements.forEach(e => e.style.display = null);
+            break;
+    }
+}
+
+function setStyleSheets() {
+    switch (getCurrentTheme()) {
+        case "":
+        case "default":
+            defaultCssElement.disabled = false;
+            darkCssElement.disabled = true;
+            break;
+        case "dark":
+            defaultCssElement.disabled = true;
+            darkCssElement.disabled = false;
+            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();
+    });
+});
+\ No newline at end of file