Add initial dark theme

2 files changed, 170 insertions, 0 deletions

diff --git a/pydis_site/static/css/base/navbar.css b/pydis_site/static/css/base/navbar.css
new file mode 100644
index 00000000..95ca36b8
--- /dev/null
+++ b/pydis_site/static/css/base/navbar.css
@@ -0,0 +1,83 @@
+.switch {
+  position: relative;
+  height: 3.25em;
+  width: 6.5em;
+  cursor: pointer;
+}
+
+.switch-outer {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 2em;
+  transition: background-color 0.3s ease-out;
+}
+
+.switch.dark .switch-outer {
+  background-color: #22272E;
+}
+
+.switch.light .switch-outer {
+  background-color: #3f61d9;
+}
+
+.switch-inner {
+  width: 95%;
+  top: 50%;
+  border-radius: 2em;
+  transition: background-color 0.2s ease-out;
+}
+
+.switch.light .switch-inner {
+  background-color: #7289da;
+}
+.switch.dark .switch-inner {
+  background-color: #1b2137;
+}
+
+.knob {
+  position: absolute;
+  height: 75%;
+  width: 37.5%;
+  top: 50%;
+  transform: translate(0%, -65%);
+  border-radius: 10em;
+  transition: all 0.5s ease-out;
+}
+
+.knob.dark {
+  background-color: #586282;
+  margin: 6% auto auto 8%;
+}
+
+.knob.light {
+  background-color: #364c94;
+  margin: 6% auto auto 56%;
+}
+
+.theme-icon {
+  position: absolute !important;
+  color: white;
+  --ggs: 1.25;
+  opacity: 100%;
+  transition: opacity 0.2s ease-out;
+  top: 33%;
+  bottom: auto;
+}
+
+.theme-icon.light {
+  left: 18%;
+}
+
+.theme-icon.dark {
+  right: 18%;
+  top: 35%
+}
+
+.switch.dark .theme-icon.light {
+  opacity: 0;
+}
+
+.switch.light .theme-icon.dark {
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
new file mode 100644
index 00000000..f0bd94b9
--- /dev/null
+++ b/pydis_site/static/js/base/navbar.js
@@ -0,0 +1,87 @@
+"use strict";
+
+const defaultCssElement = $("#bulma-css")[0];
+const darkCssElement = $("#bulma-css-dark")[0];
+
+function getCurrentTheme() {
+    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;
+    }
+}
+
+
+// Executed when the page has finished loading.
+document.addEventListener("DOMContentLoaded", () => {
+
+    setStyleSheets();
+    displayThemedElements();
+
+    $('#theme-switch').on("click", () => {
+
+        // Update cookie
+        if (getCurrentTheme() === "dark") {
+            document.cookie = "theme=default";
+        } else {
+            document.cookie = "theme=dark";
+        }
+
+        setStyleSheets();
+        displayThemedElements();
+
+        // Animations
+        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);
+        }
+    });
+});
\ No newline at end of file