From 01deafa5bf5b68784d434d6f361c21d72cf89069 Mon Sep 17 00:00:00 2001
From: GDWR <gregory.dwr@gmail.com>
Date: Tue, 8 Feb 2022 00:43:03 +0000
Subject: Add initial dark theme

---
 pydis_site/static/js/base/navbar.js | 87 +++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 pydis_site/static/js/base/navbar.js

(limited to 'pydis_site/static/js/base')

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
-- 
cgit v1.2.3


From 47be83e4c7924109acce52a00b7135147c28244e Mon Sep 17 00:00:00 2001
From: GDWR <gregory.dwr@gmail.com>
Date: Tue, 8 Feb 2022 08:44:45 +0000
Subject: getCurrentTheme returns "default" if empty

---
 pydis_site/static/js/base/navbar.js | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
index f0bd94b9..23ddfd7c 100644
--- a/pydis_site/static/js/base/navbar.js
+++ b/pydis_site/static/js/base/navbar.js
@@ -4,6 +4,9 @@ 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='))
-- 
cgit v1.2.3


From d2d98a1a3ce7a0def73e75be6e305e03b1af864e Mon Sep 17 00:00:00 2001
From: GDWR <gregory.dwr@gmail.com>
Date: Tue, 8 Feb 2022 23:44:26 +0000
Subject: Determine current theme and set switch

---
 pydis_site/static/js/base/navbar.js | 52 ++++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 24 deletions(-)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
index 23ddfd7c..b49c86b1 100644
--- a/pydis_site/static/js/base/navbar.js
+++ b/pydis_site/static/js/base/navbar.js
@@ -44,6 +44,30 @@ function setStyleSheets() {
     }
 }
 
+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", () => {
@@ -51,6 +75,9 @@ document.addEventListener("DOMContentLoaded", () => {
     setStyleSheets();
     displayThemedElements();
 
+    if (getCurrentTheme() === "default")
+        toggleThemeSwitch();
+
     $('#theme-switch').on("click", () => {
 
         // Update cookie
@@ -62,29 +89,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
         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);
-        }
+        toggleThemeSwitch();
     });
 });
\ No newline at end of file
-- 
cgit v1.2.3


From 1177f0d442a40e603b5d4d06dfe6590133724dbf Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Thu, 14 Dec 2023 20:29:27 +0800
Subject: Automatically fix lint

---
 pydis_site/static/css/base/navbar.css | 2 +-
 pydis_site/static/js/base/navbar.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/css/base/navbar.css b/pydis_site/static/css/base/navbar.css
index bf8913ab..9d71e799 100644
--- a/pydis_site/static/css/base/navbar.css
+++ b/pydis_site/static/css/base/navbar.css
@@ -62,4 +62,4 @@
 
 .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
index b49c86b1..a4b8a0aa 100644
--- a/pydis_site/static/js/base/navbar.js
+++ b/pydis_site/static/js/base/navbar.js
@@ -91,4 +91,4 @@ document.addEventListener("DOMContentLoaded", () => {
         displayThemedElements();
         toggleThemeSwitch();
     });
-});
\ No newline at end of file
+});
-- 
cgit v1.2.3


From 058b562304a96055a57f8daee80db07c596684ec Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Fri, 5 Jan 2024 09:16:47 +0800
Subject: 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!
---
 pydis_site/static/js/base/navbar.js   | 114 +++++++++++++---------------------
 pydis_site/templates/base/navbar.html |   6 +-
 2 files changed, 45 insertions(+), 75 deletions(-)

(limited to 'pydis_site/static/js/base')

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);
     });
 });
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index f6a1bc26..57fdbf6a 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -3,7 +3,6 @@
 {% 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 %}
 
@@ -104,17 +103,18 @@
         </div>
       </div>
 
+      {# Theme toggle #}
       <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>
+          <div id="theme-knob" class="knob dark"></div>
           <i class="theme-icon dark gg-moon"></i>
         </div>
       </div>
 
-      {# Desktop Nav Discord  #}
+      {# Desktop Nav Discord #}
       <div id="discord-btn" class="buttons is-hidden-touch is-white">
         <a href="https://discord.gg/python" class="button is-large is-primary">Discord</a>
       </div>
-- 
cgit v1.2.3


From eaaf1efff1f5d9b47658541496fb948a3292fe48 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Fri, 5 Jan 2024 13:57:44 +0800
Subject: Dark: Support system color scheme preference

Added features
- When no preference already stored when page loads, we'll take into
  account the system setting and set the theme automatically.
- When the system setting is modified while the site is active, switch
  theme automatically.
- The system preference takes lower precedence than saved preference
  from the switch toggle, unless the setting is modified while the site
  is active.

Miscellaneous refactor.
---
 pydis_site/static/js/base/navbar.js | 49 ++++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 12 deletions(-)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
index 9a1641aa..04850add 100644
--- a/pydis_site/static/js/base/navbar.js
+++ b/pydis_site/static/js/base/navbar.js
@@ -1,32 +1,42 @@
 "use strict";
 
 const defaultTheme = "light";
-const lightCssElement = document.getElementById("bulma-css");
-const darkCssElement = document.getElementById("bulma-css-dark");
+const lightStylesheet = document.getElementById("bulma-css");
+const darkStylesheet = document.getElementById("bulma-css-dark");
 
-function getCurrentTheme() {
+// Get saved preference for the site in local storage, optionally accounting
+// for system preference used when a page loads.
+function getCurrentTheme(systemPrefers) {
     const theme = localStorage.getItem("theme");
-    if (theme === null || theme === "")
-        return defaultTheme;
-    return theme;
+
+    if (theme !== null && theme !== "")
+        return theme;
+
+    if (systemPrefers !== undefined)
+        return systemPrefers;
+
+    return defaultTheme;
 }
 
+// Disable & enable the correct CSS stylesheets based on chosen theme.
 function setStyleSheets(newTheme) {
     switch (newTheme) {
         case "light":
-            lightCssElement.disabled = false;
-            darkCssElement.disabled = true;
+            lightStylesheet.disabled = false;
+            darkStylesheet.disabled = true;
             break;
         case "dark":
-            lightCssElement.disabled = true;
-            darkCssElement.disabled = false;
+            lightStylesheet.disabled = true;
+            darkStylesheet.disabled = false;
             break;
     }
 }
 
+// Reflect chosen theme on the switch toggle.
 function toggleThemeSwitch(newTheme) {
     const switchToggle = document.getElementById("theme-switch");
     const knob = document.getElementById("theme-knob");
+
     switch (newTheme) {
         case "light":
             knob.classList.remove("dark");
@@ -49,14 +59,29 @@ function toggleThemeSwitch(newTheme) {
 
 // Executed when the page has finished loading.
 document.addEventListener("DOMContentLoaded", () => {
-    const theme = getCurrentTheme()
+    let theme;
+    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+    if (systemPrefersDark.matches)
+        theme = getCurrentTheme("dark");
+    else
+        theme = getCurrentTheme();
+
     setStyleSheets(theme);
     toggleThemeSwitch(theme);
 
+    systemPrefersDark.addEventListener("change", ({matches: isDark}) => {
+        const newTheme = isDark ? "dark" : "light";
+        // Let the new system preference take precedence over toggle preference
+        // on page reloads.
+        localStorage.removeItem("theme");
+        setStyleSheets(newTheme);
+        toggleThemeSwitch(newTheme);
+    })
+
     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);
-- 
cgit v1.2.3


From 7b5435a9855111dd34422ff0067c1955c43875eb Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Fri, 5 Jan 2024 17:31:11 +0800
Subject: Dark: Fix hero colors on homepage

We can now use `[data-theme="dark"]` selector in CSS to defined styles
specifically for dark mode. This follows common web dev patterns and
gives little overhead.

- Hero
  - Added `wave_black` SVG which copies `wave_white` as is but uses the
    site's dark mode background color.
---
 pydis_site/static/css/home/index.css          | 10 ++++
 pydis_site/static/images/waves/wave_black.svg | 77 +++++++++++++++++++++++++++
 pydis_site/static/js/base/navbar.js           |  2 +
 3 files changed, 89 insertions(+)
 create mode 100644 pydis_site/static/images/waves/wave_black.svg

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index e117a35b..23e27be1 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -91,6 +91,11 @@ h1 {
     height: 26px;
     z-index: 3;
 }
+[data-theme="dark"] {
+    #bottom-wave {
+        background: url(../../images/waves/wave_black.svg) repeat-x !important;
+    }
+}
 
 @keyframes wave {
   0% {
@@ -176,6 +181,11 @@ h1 {
 #projects .card:hover .card-header-title {
     color: #363636;
 }
+[data-theme="dark"] {
+    #projects .card:hover .card-header-title {
+        color: #CAD6FF;
+    }
+}
 
 #projects .card-content {
     padding-top: 8px;
diff --git a/pydis_site/static/images/waves/wave_black.svg b/pydis_site/static/images/waves/wave_black.svg
new file mode 100644
index 00000000..899fe2f9
--- /dev/null
+++ b/pydis_site/static/images/waves/wave_black.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1600"
+   height="28.745832"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="wavew.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata15">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1409"
+     id="namedview13"
+     showgrid="false"
+     inkscape:zoom="1.44625"
+     inkscape:cx="884.40031"
+     inkscape:cy="-61.865141"
+     inkscape:window-x="4880"
+     inkscape:window-y="677"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs7">
+    <linearGradient
+       id="a"
+       x1="0.5"
+       x2="0.5"
+       y1="-0.10958999"
+       y2="1">
+      <stop
+         stop-color="#57BBC1"
+         stop-opacity=".25"
+         offset="0%"
+         id="stop2" />
+      <stop
+         stop-color="#015871"
+         offset="100%"
+         id="stop4" />
+    </linearGradient>
+  </defs>
+  <path
+     fill="url(#a)"
+     fill-rule="evenodd"
+     d="M 1599.995,17.566918 C 1289,17.566918 1190.102,-0.03623696 789,5.6042811e-5 389,5.6042811e-5 289,17.566918 0,17.566918 v 11.178914 h 1600 c 0,0 -0.01,-6.968673 -0.01,-11.178914 z"
+     id="path9"
+     style="fill:#2C2F33;fill-opacity:1;stroke-width:0.381026" />
+</svg>
diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
index 04850add..2a57cad4 100644
--- a/pydis_site/static/js/base/navbar.js
+++ b/pydis_site/static/js/base/navbar.js
@@ -30,6 +30,8 @@ function setStyleSheets(newTheme) {
             darkStylesheet.disabled = false;
             break;
     }
+
+    document.querySelector("html").setAttribute("data-theme", newTheme);
 }
 
 // Reflect chosen theme on the switch toggle.
-- 
cgit v1.2.3


From 7559cb72da7e8b84dd81b33d54ba6c6abd156fd7 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Fri, 5 Jan 2024 20:55:34 +0800
Subject: Dark: Name JS & CSS files according to their content

We have the CSS for the navbar in base.css, the relevant files only
contain code for the theme toggle, so they should be named as such.

If we ever implement CSS variables per-theme, they could then be done in
`themes.css`.
---
 pydis_site/static/css/base/navbar.css | 65 -------------------------
 pydis_site/static/css/base/themes.css | 67 ++++++++++++++++++++++++++
 pydis_site/static/js/base/navbar.js   | 91 -----------------------------------
 pydis_site/static/js/base/themes.js   | 91 +++++++++++++++++++++++++++++++++++
 pydis_site/templates/base/navbar.html |  4 +-
 5 files changed, 160 insertions(+), 158 deletions(-)
 delete mode 100644 pydis_site/static/css/base/navbar.css
 create mode 100644 pydis_site/static/css/base/themes.css
 delete mode 100644 pydis_site/static/js/base/navbar.js
 create mode 100644 pydis_site/static/js/base/themes.js

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/css/base/navbar.css b/pydis_site/static/css/base/navbar.css
deleted file mode 100644
index 9d71e799..00000000
--- a/pydis_site/static/css/base/navbar.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.switch {
-  position: relative;
-  height: 2em;
-  width: 4em;
-  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;
-}
-
-.knob {
-  position: absolute;
-  padding-top: 20%;
-  height: 70%;
-  width: 37.5%;
-  border-radius: 10em;
-  transition: all 0.5s ease-out;
-}
-
-.knob.dark {
-  background-color: #586282;
-  margin: 7% auto auto 8%;
-}
-
-.knob.light {
-  background-color: #364c94;
-  margin: 7% auto auto 56%;
-}
-
-.theme-icon {
-  position: absolute !important;
-  --ggs: 0.75;
-  transition: opacity 0.3s ease-out;
-}
-
-.theme-icon.light {
-  left: 10%;
-  top: 15%
-}
-
-.theme-icon.dark {
-  right: 10%;
-  top: 20%
-}
-
-.switch.dark .theme-icon.light {
-  opacity: 0;
-}
-
-.switch.light .theme-icon.dark {
-  opacity: 0;
-}
diff --git a/pydis_site/static/css/base/themes.css b/pydis_site/static/css/base/themes.css
new file mode 100644
index 00000000..35273d44
--- /dev/null
+++ b/pydis_site/static/css/base/themes.css
@@ -0,0 +1,67 @@
+/* Theme switch toggle */
+
+.switch {
+  position: relative;
+  height: 2em;
+  width: 4em;
+  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;
+}
+
+.knob {
+  position: absolute;
+  padding-top: 20%;
+  height: 70%;
+  width: 37.5%;
+  border-radius: 10em;
+  transition: all 0.5s ease-out;
+}
+
+.knob.dark {
+  background-color: #586282;
+  margin: 7% auto auto 8%;
+}
+
+.knob.light {
+  background-color: #364c94;
+  margin: 7% auto auto 56%;
+}
+
+.theme-icon {
+  position: absolute !important;
+  --ggs: 0.75;
+  transition: opacity 0.3s ease-out;
+}
+
+.theme-icon.light {
+  left: 10%;
+  top: 15%
+}
+
+.theme-icon.dark {
+  right: 10%;
+  top: 20%
+}
+
+.switch.dark .theme-icon.light {
+  opacity: 0;
+}
+
+.switch.light .theme-icon.dark {
+  opacity: 0;
+}
diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
deleted file mode 100644
index 2a57cad4..00000000
--- a/pydis_site/static/js/base/navbar.js
+++ /dev/null
@@ -1,91 +0,0 @@
-"use strict";
-
-const defaultTheme = "light";
-const lightStylesheet = document.getElementById("bulma-css");
-const darkStylesheet = document.getElementById("bulma-css-dark");
-
-// Get saved preference for the site in local storage, optionally accounting
-// for system preference used when a page loads.
-function getCurrentTheme(systemPrefers) {
-    const theme = localStorage.getItem("theme");
-
-    if (theme !== null && theme !== "")
-        return theme;
-
-    if (systemPrefers !== undefined)
-        return systemPrefers;
-
-    return defaultTheme;
-}
-
-// Disable & enable the correct CSS stylesheets based on chosen theme.
-function setStyleSheets(newTheme) {
-    switch (newTheme) {
-        case "light":
-            lightStylesheet.disabled = false;
-            darkStylesheet.disabled = true;
-            break;
-        case "dark":
-            lightStylesheet.disabled = true;
-            darkStylesheet.disabled = false;
-            break;
-    }
-
-    document.querySelector("html").setAttribute("data-theme", newTheme);
-}
-
-// Reflect chosen theme on the switch toggle.
-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":
-            knob.classList.remove("light");
-            knob.classList.add("dark");
-            setTimeout(function() {
-                switchToggle.classList.remove("light");
-                switchToggle.classList.add("dark");
-            }, 100);
-            break;
-    }
-}
-
-// Executed when the page has finished loading.
-document.addEventListener("DOMContentLoaded", () => {
-    let theme;
-    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-
-    if (systemPrefersDark.matches)
-        theme = getCurrentTheme("dark");
-    else
-        theme = getCurrentTheme();
-
-    setStyleSheets(theme);
-    toggleThemeSwitch(theme);
-
-    systemPrefersDark.addEventListener("change", ({matches: isDark}) => {
-        const newTheme = isDark ? "dark" : "light";
-        // Let the new system preference take precedence over toggle preference
-        // on page reloads.
-        localStorage.removeItem("theme");
-        setStyleSheets(newTheme);
-        toggleThemeSwitch(newTheme);
-    })
-
-    const switchToggle = document.getElementById("theme-switch");
-    switchToggle.addEventListener("click", () => {
-        const newTheme = getCurrentTheme() === "light" ? "dark" : "light";
-        localStorage.setItem("theme", newTheme);
-        setStyleSheets(newTheme);
-        toggleThemeSwitch(newTheme);
-    });
-});
diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js
new file mode 100644
index 00000000..2a57cad4
--- /dev/null
+++ b/pydis_site/static/js/base/themes.js
@@ -0,0 +1,91 @@
+"use strict";
+
+const defaultTheme = "light";
+const lightStylesheet = document.getElementById("bulma-css");
+const darkStylesheet = document.getElementById("bulma-css-dark");
+
+// Get saved preference for the site in local storage, optionally accounting
+// for system preference used when a page loads.
+function getCurrentTheme(systemPrefers) {
+    const theme = localStorage.getItem("theme");
+
+    if (theme !== null && theme !== "")
+        return theme;
+
+    if (systemPrefers !== undefined)
+        return systemPrefers;
+
+    return defaultTheme;
+}
+
+// Disable & enable the correct CSS stylesheets based on chosen theme.
+function setStyleSheets(newTheme) {
+    switch (newTheme) {
+        case "light":
+            lightStylesheet.disabled = false;
+            darkStylesheet.disabled = true;
+            break;
+        case "dark":
+            lightStylesheet.disabled = true;
+            darkStylesheet.disabled = false;
+            break;
+    }
+
+    document.querySelector("html").setAttribute("data-theme", newTheme);
+}
+
+// Reflect chosen theme on the switch toggle.
+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":
+            knob.classList.remove("light");
+            knob.classList.add("dark");
+            setTimeout(function() {
+                switchToggle.classList.remove("light");
+                switchToggle.classList.add("dark");
+            }, 100);
+            break;
+    }
+}
+
+// Executed when the page has finished loading.
+document.addEventListener("DOMContentLoaded", () => {
+    let theme;
+    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+    if (systemPrefersDark.matches)
+        theme = getCurrentTheme("dark");
+    else
+        theme = getCurrentTheme();
+
+    setStyleSheets(theme);
+    toggleThemeSwitch(theme);
+
+    systemPrefersDark.addEventListener("change", ({matches: isDark}) => {
+        const newTheme = isDark ? "dark" : "light";
+        // Let the new system preference take precedence over toggle preference
+        // on page reloads.
+        localStorage.removeItem("theme");
+        setStyleSheets(newTheme);
+        toggleThemeSwitch(newTheme);
+    })
+
+    const switchToggle = document.getElementById("theme-switch");
+    switchToggle.addEventListener("click", () => {
+        const newTheme = getCurrentTheme() === "light" ? "dark" : "light";
+        localStorage.setItem("theme", newTheme);
+        setStyleSheets(newTheme);
+        toggleThemeSwitch(newTheme);
+    });
+});
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index 57fdbf6a..64518146 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -1,9 +1,9 @@
 {% load static %}
 
 {% block head %}
-    <link rel="stylesheet" href="{% static "css/base/navbar.css" %}">
+    <link rel="stylesheet" href="{% static "css/base/themes.css" %}">
     <link href="https://css.gg/css?=|moon|sun" rel="stylesheet">
-    <script src="{% static "js/base/navbar.js" %}"></script>
+    <script src="{% static "js/base/themes.js" %}"></script>
 {% endblock %}
 
 <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
-- 
cgit v1.2.3


From 9f04f20268230e8bc2594c325214cde3678335b0 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Thu, 18 Jan 2024 07:46:54 +0800
Subject: Dark: Improve order of switching stylesheets

---
 pydis_site/static/js/base/themes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js
index 2a57cad4..c1a5f006 100644
--- a/pydis_site/static/js/base/themes.js
+++ b/pydis_site/static/js/base/themes.js
@@ -26,8 +26,8 @@ function setStyleSheets(newTheme) {
             darkStylesheet.disabled = true;
             break;
         case "dark":
-            lightStylesheet.disabled = true;
             darkStylesheet.disabled = false;
+            lightStylesheet.disabled = true;
             break;
     }
 
-- 
cgit v1.2.3


From 05bbeda4e060f341a64b4d47fd618224f6b73bb1 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Thu, 18 Jan 2024 10:02:12 +0800
Subject: Dark: Set correct theme immediately when the script loads

This fixes the latency previously observed on page loads.

We still have to put switch toggling after page loads though.

Genius idea by wookie.

Co-authored-by: wookie184 <wookie1840@gmail.com>
---
 pydis_site/static/js/base/themes.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js
index c1a5f006..9c279d21 100644
--- a/pydis_site/static/js/base/themes.js
+++ b/pydis_site/static/js/base/themes.js
@@ -59,19 +59,19 @@ function toggleThemeSwitch(newTheme) {
     }
 }
 
-// Executed when the page has finished loading.
-document.addEventListener("DOMContentLoaded", () => {
-    let theme;
-    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+let theme;
+const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)");
 
-    if (systemPrefersDark.matches)
-        theme = getCurrentTheme("dark");
-    else
-        theme = getCurrentTheme();
+if (systemPrefersDark.matches)
+    theme = getCurrentTheme("dark");
+else
+    theme = getCurrentTheme();
 
-    setStyleSheets(theme);
-    toggleThemeSwitch(theme);
+setStyleSheets(theme);
 
+// Executed when the page has finished loading.
+document.addEventListener("DOMContentLoaded", () => {
+    toggleThemeSwitch(theme);
     systemPrefersDark.addEventListener("change", ({matches: isDark}) => {
         const newTheme = isDark ? "dark" : "light";
         // Let the new system preference take precedence over toggle preference
-- 
cgit v1.2.3


From 4de6d4064bb072e4ad9ab96035e3e6e635ff8753 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Thu, 18 Jan 2024 10:59:09 +0800
Subject: Dark: Possibly fix FOUC during theme switch

---
 pydis_site/static/js/base/themes.js   | 8 ++++----
 pydis_site/templates/base/navbar.html | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js
index 9c279d21..c5de8d91 100644
--- a/pydis_site/static/js/base/themes.js
+++ b/pydis_site/static/js/base/themes.js
@@ -22,12 +22,12 @@ function getCurrentTheme(systemPrefers) {
 function setStyleSheets(newTheme) {
     switch (newTheme) {
         case "light":
-            lightStylesheet.disabled = false;
-            darkStylesheet.disabled = true;
+            lightStylesheet.rel = "stylesheet";
+            darkStylesheet.rel = "stylesheet alternate";
             break;
         case "dark":
-            darkStylesheet.disabled = false;
-            lightStylesheet.disabled = true;
+            darkStylesheet.rel = "stylesheet";
+            lightStylesheet.rel = "stylesheet alternate";
             break;
     }
 
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index 3aa860cf..2fcd8ad8 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -1,9 +1,9 @@
 {% load static %}
 
 {% block head %}
-    <link rel="stylesheet" href="{% static "css/base/themes.css" %}">
-    <link href="https://css.gg/css?=|moon|sun" rel="stylesheet">
-    <script src="{% static "js/base/themes.js" %}"></script>
+  <link rel="stylesheet" href="{% static "css/base/themes.css" %}">
+  <link href="https://css.gg/css?=|moon|sun" rel="stylesheet">
+  <script src="{% static "js/base/themes.js" %}"></script>
 {% endblock %}
 
 <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
-- 
cgit v1.2.3


From 15503b438c181053fa16884098c7ba1a57139303 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Thu, 18 Jan 2024 12:28:22 +0800
Subject: Temporary fix to theme-switching FOUC problem

---
 pydis_site/static/js/base/themes.js | 9 +++------
 pydis_site/templates/base/base.html | 1 -
 2 files changed, 3 insertions(+), 7 deletions(-)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js
index c5de8d91..fa7b9cf6 100644
--- a/pydis_site/static/js/base/themes.js
+++ b/pydis_site/static/js/base/themes.js
@@ -1,8 +1,7 @@
 "use strict";
 
 const defaultTheme = "light";
-const lightStylesheet = document.getElementById("bulma-css");
-const darkStylesheet = document.getElementById("bulma-css-dark");
+const stylesheet = document.getElementById("bulma-css");
 
 // Get saved preference for the site in local storage, optionally accounting
 // for system preference used when a page loads.
@@ -22,12 +21,10 @@ function getCurrentTheme(systemPrefers) {
 function setStyleSheets(newTheme) {
     switch (newTheme) {
         case "light":
-            lightStylesheet.rel = "stylesheet";
-            darkStylesheet.rel = "stylesheet alternate";
+            stylesheet.href = "/static/css/bulma.css";
             break;
         case "dark":
-            darkStylesheet.rel = "stylesheet";
-            lightStylesheet.rel = "stylesheet alternate";
+            stylesheet.href = "/static/css/dark_bulma.css";
             break;
     }
 
diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html
index e497298a..bf58fb05 100644
--- a/pydis_site/templates/base/base.html
+++ b/pydis_site/templates/base/base.html
@@ -24,7 +24,6 @@
   <title>Python Discord | {% block title %}Website{% endblock %}</title>
 
   {% bulma %}
-  {% bulma 'dark' include_js=False %}
 
   {% font_awesome %}
   <link rel="stylesheet" href="{% static "css/base/base.css" %}">
-- 
cgit v1.2.3


From f0a5da2bf84818f2ac72b6272ee674bef6e6134c Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Thu, 18 Jan 2024 12:51:17 +0800
Subject: Optimistic fix for FOUC on initial site load

---
 pydis_site/static/js/base/themes.js | 4 ++++
 pydis_site/templates/base/base.html | 1 +
 2 files changed, 5 insertions(+)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js
index fa7b9cf6..f79b759d 100644
--- a/pydis_site/static/js/base/themes.js
+++ b/pydis_site/static/js/base/themes.js
@@ -3,6 +3,10 @@
 const defaultTheme = "light";
 const stylesheet = document.getElementById("bulma-css");
 
+// We include the dark stylesheet in base template to include the rel="preload",
+// but remove the actual rel="stylesheet" element here because we won't need it.
+document.getElementById("bulma-css-dark").remove();
+
 // Get saved preference for the site in local storage, optionally accounting
 // for system preference used when a page loads.
 function getCurrentTheme(systemPrefers) {
diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html
index bf58fb05..e497298a 100644
--- a/pydis_site/templates/base/base.html
+++ b/pydis_site/templates/base/base.html
@@ -24,6 +24,7 @@
   <title>Python Discord | {% block title %}Website{% endblock %}</title>
 
   {% bulma %}
+  {% bulma 'dark' include_js=False %}
 
   {% font_awesome %}
   <link rel="stylesheet" href="{% static "css/base/base.css" %}">
-- 
cgit v1.2.3


From 075bffd481f2cba552b5d3025b6ecd6ad0fb74e1 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Sat, 20 Jan 2024 13:28:04 +0800
Subject: Dark: Fix switch toggle when system preference is used

Thanks to wookie for finding the bug.
---
 pydis_site/static/js/base/themes.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'pydis_site/static/js/base')

diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js
index f79b759d..46dba7b9 100644
--- a/pydis_site/static/js/base/themes.js
+++ b/pydis_site/static/js/base/themes.js
@@ -2,6 +2,7 @@
 
 const defaultTheme = "light";
 const stylesheet = document.getElementById("bulma-css");
+const htmlTag = document.querySelector("html");
 
 // We include the dark stylesheet in base template to include the rel="preload",
 // but remove the actual rel="stylesheet" element here because we won't need it.
@@ -32,7 +33,7 @@ function setStyleSheets(newTheme) {
             break;
     }
 
-    document.querySelector("html").setAttribute("data-theme", newTheme);
+    htmlTag.setAttribute("data-theme", newTheme);
 }
 
 // Reflect chosen theme on the switch toggle.
@@ -73,6 +74,7 @@ setStyleSheets(theme);
 // Executed when the page has finished loading.
 document.addEventListener("DOMContentLoaded", () => {
     toggleThemeSwitch(theme);
+
     systemPrefersDark.addEventListener("change", ({matches: isDark}) => {
         const newTheme = isDark ? "dark" : "light";
         // Let the new system preference take precedence over toggle preference
@@ -84,7 +86,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const switchToggle = document.getElementById("theme-switch");
     switchToggle.addEventListener("click", () => {
-        const newTheme = getCurrentTheme() === "light" ? "dark" : "light";
+        const newTheme = htmlTag.getAttribute("data-theme") === "light" ? "dark" : "light";
         localStorage.setItem("theme", newTheme);
         setStyleSheets(newTheme);
         toggleThemeSwitch(newTheme);
-- 
cgit v1.2.3