Add initial dark theme

4 files changed, 193 insertions, 1 deletions

diff --git a/pydis_site/settings.py b/pydis_site/settings.py
index 1ba81a5c..0d19dc10 100644
--- a/pydis_site/settings.py
+++ b/pydis_site/settings.py
@@ -269,7 +269,12 @@ BULMA_SETTINGS = {
         "tooltip-max-width": "30rem",
     },
     "dark_variables": {
-        "primary": "#373737",
+        "primary": "#7289DA",
+        "white": "#22272E",
+        "text": "#F4F4F4",
+
+        "link": "$primary",
+
 
         # Use the same sizes
         "dimensions": "16 24 32 48 64 96 128 256 512",
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
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index d7fb4f4c..41d6c778 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -1,5 +1,12 @@
 {% load static %}
 
+{% block head %}
+    <link rel="stylesheet" href="{% static "css/base/navbar.css" %}">
+    <link href="https://css.gg/css?=|moon|sun" rel="stylesheet">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="{% static "js/base/navbar.js" %}"></script>
+{% endblock %}
+
 <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
 
@@ -94,6 +101,16 @@
         </div>
       </div>
 
+      <div class="navbar-item">
+        <div id="theme-switch" class="switch dark">
+          <div class="switch-outer"></div>
+          <div class="switch-inner"></div>
+          <i class="theme-icon light gg-sun"></i>
+          <div class="knob dark"></div>
+          <i class="theme-icon dark gg-moon"></i>
+        </div>
+      </div>
+
       {# Desktop Nav Discord  #}
       <div id="discord-btn" class="buttons is-hidden-touch">
         <a href="https://discord.gg/python" class="button is-large is-primary">Discord</a>