13 files changed, 378 insertions, 34 deletions

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/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index 1d73fa00..30a95df7 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -5,6 +5,10 @@
   outline: none;
 }
 
+[data-theme="dark"] .collapsible {
+  background-color: #403f45;
+}
+
 .collapsible-content {
   transition: max-height 0.3s ease-out;
   overflow: hidden;
diff --git a/pydis_site/static/css/content/color.css b/pydis_site/static/css/content/color.css
index f4801c28..75de31f1 100644
--- a/pydis_site/static/css/content/color.css
+++ b/pydis_site/static/css/content/color.css
@@ -2,6 +2,10 @@
     color: black;
 }
 
+[data-theme="dark"] .content .fa-github {
+    color: white;
+}
+
 .content .fa-github:hover {
     color: #7289DA;
 }
diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css
index 58fad0f8..903b2134 100644
--- a/pydis_site/static/css/content/page.css
+++ b/pydis_site/static/css/content/page.css
@@ -27,6 +27,18 @@ i.has-icon-padding {
     flex-direction: column;
 }
 
+[data-theme="dark"] .card.github-card {
+    border: solid 1px #4E4F51;
+}
+
+[data-theme="dark"] .card-footer {
+    border-top: solid 1px #4E4F51;
+}
+
+[data-theme="dark"] .card-footer-item:not(:last-child) {
+    border-right: solid 1px #4E4F51;
+}
+
 .card.github-card .card-content {
     flex: 1;
 }
@@ -102,6 +114,10 @@ li img {
     margin-top: 0.5em;
 }
 
+[data-theme="dark"] hr {
+    background-color: #4c515a;
+}
+
 .dropdown-menu {
     min-width: 15rem;
 }
diff --git a/pydis_site/static/css/content/tag.css b/pydis_site/static/css/content/tag.css
index 79795f9e..b6c03ef3 100644
--- a/pydis_site/static/css/content/tag.css
+++ b/pydis_site/static/css/content/tag.css
@@ -4,6 +4,10 @@
     color: #7289DA;
 }
 
+[data-theme="dark"] .content a {
+    color: #99B0FF;
+}
+
 .content a *:hover {
     color: dimgray;
 }
diff --git a/pydis_site/static/css/error_pages.css b/pydis_site/static/css/error_pages.css
index 042a53a0..5c6fb661 100644
--- a/pydis_site/static/css/error_pages.css
+++ b/pydis_site/static/css/error_pages.css
@@ -36,6 +36,10 @@ a {
     color: #7289DA;
 }
 
+[data-theme="dark"] a {
+    color: #99B0FF;
+}
+
 ul {
     margin-bottom: 0;
 }
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index e117a35b..5ecf7cd7 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -92,6 +92,10 @@ h1 {
     z-index: 3;
 }
 
+[data-theme="dark"] #bottom-wave {
+    background: url(../../images/waves/wave_black.svg) repeat-x !important;
+}
+
 @keyframes wave {
   0% {
     margin-left: 0;
@@ -107,6 +111,10 @@ h1 {
     margin: 0 1em;
 }
 
+[data-theme="dark"] #showcase .box {
+    box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0px 0 1px rgb(10 10 10 / 2%);
+}
+
 #showcase .mini-timeline {
     height: 3px;
     position: relative;
@@ -153,10 +161,18 @@ h1 {
     flex-direction: column;
 }
 
+[data-theme="dark"] #projects .card {
+    border: #4E4F51 1px solid;
+}
+
 #projects .card:hover {
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
+[data-theme="dark"] #projects .card:hover {
+    box-shadow: 0 1px 3px rgb(10 10 10 / 65%), 0 1px 2px rgb(10 10 10 / 85%);
+}
+
 #projects .card-header {
     box-shadow: none;
     font-size: 1.25rem;
@@ -170,13 +186,20 @@ h1 {
 
 #projects .card-header-title {
     padding: 0;
-    color: #7289DA;
+    /* Link color from settings.py */
+    color: #99B0FF;
 }
 
 #projects .card:hover .card-header-title {
+    /* Bulma link-hover setting */
     color: #363636;
 }
 
+[data-theme="dark"] #projects .card:hover .card-header-title {
+    /* Bulma link-hover setting */
+    color: #FFFFFF;
+}
+
 #projects .card-content {
     padding-top: 8px;
     padding-bottom: 1rem;
@@ -218,21 +241,72 @@ h1 {
     text-align: center;
 }
 
-#sponsors .columns {
-    display: block;
-    justify-content: center;
-    margin: auto;
-    max-width: 80%;
+[data-theme="dark"] #sponsors {
+    background-color: #2C2F33 !important;
+}
+
+#sponsors .container {
+    max-width: 70%;
 }
 
 #sponsors a {
-    margin: auto;
-    display: inline-block;
+    border-radius: .2rem;
+    margin-bottom: .8rem;
+    position: relative;
 }
 
 #sponsors img {
-    width: auto;
-    height: auto;
+    max-height: 4rem;
+}
+
+[data-theme="dark"] #sponsors a {
+    background-color: #EDEDED;
+}
 
-    max-height: 5rem;
+@media (min-width: 800px) {
+    #sponsors a.column.is-one-third:first-child {
+        margin-left: -.8rem;
+        margin-right: .8rem;
+    }
+
+    #sponsors a.column.is-one-third:last-child {
+        margin-left: .8rem;
+        margin-right: -.8rem;
+    }
+
+    #sponsors a.column.is-half {
+        width: calc(50% + .4rem);
+    }
+
+    #sponsors a.column.is-half:first-child {
+        margin-left: -.8rem;
+        margin-right: .4rem;
+    }
+
+    #sponsors a.column.is-half:last-child {
+        margin-left: .4rem;
+        margin-right: -.8rem;
+    }
+
+    #sponsors a {
+        height: 5rem;
+        padding: .4rem;
+    }
+
+    #sponsors img {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        max-width: calc(100% - 0.8rem);
+    }
+
+}
+
+@media (max-width: 800px) {
+    #sponsors .columns {
+        margin-bottom: 1.5rem;
+    }
 }
diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 0a4dfbb6..369d5c8f 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -1,8 +1,3 @@
-body {
-    background-color: hsl(0, 0%, 100%);
-    background-color: var(--color-bg, white)
-}
-
 h2 {
     font-size: 2em;
 }
@@ -3391,6 +3386,13 @@ mark {
     --font-secondary: 'Open Sans', sans-serif
 }
 
+[data-theme="dark"] {
+    --cd-color-2: hsl(0, 0%, 34%);
+    --cd-color-2-h: 0;
+    --cd-color-2-s: 0%;
+    --cd-color-2-l: 34%;
+}
+
 @supports (--css: variables) {
     @media (min-width: 64rem) {
         :root {
@@ -3552,8 +3554,6 @@ mark {
     position: relative;
     margin-left: 1.25em;
     margin-left: var(--space-md);
-    background: hsl(0, 0%, 100%);
-    background: var(--color-white);
     border-radius: 0.25em;
     border-radius: var(--radius-md);
     padding: 1.25em;
@@ -3571,7 +3571,7 @@ mark {
     height: 0;
     border: 7px solid transparent;
     border-right-color: hsl(0, 0%, 100%);
-    border-right-color: var(--color-white)
+    border-right-color: var(--cd-color-2)
 }
 
 .cd-timeline__content h2 {
@@ -3599,15 +3599,10 @@ mark {
         height: 0;
         border: 7px solid transparent;
         border-left-color: hsl(0, 0%, 100%);
-        border-left-color: var(--color-white)
+        border-left-color: var(--cd-color-2)
     }
 }
 
-.cd-timeline__date {
-    color: hsla(207, 10%, 55%, 0.7);
-    color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7)
-}
-
 @media (min-width: 64rem) {
     .cd-timeline__date {
         position: absolute;
diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index 96d06111..582d96e4 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -154,11 +154,15 @@ i.is-primary {
 }
 
 /* When hovering title anchors, just make the color a lighter primary, not black. */
-.resource-box a:hover {
+[data-theme="light"] .resource-box a:hover {
     filter: brightness(120%);
     color: #7289DA;
 }
 
+[data-theme="dark"] .resource-box a:hover {
+    color: white;
+}
+
 /* Set default display to inline-flex, for centering. */
 span.filter-box-tag {
     display: none;
@@ -195,22 +199,26 @@ button.delete {
 }
 
 /* Colors for delete button x's */
-button.delete.is-primary::before,
-button.delete.is-primary::after {
+[data-theme="light"] button.delete.is-primary::before,
+[data-theme="light"] button.delete.is-primary::after {
     background-color: #2a45a2;
 }
-button.delete.is-success::before,
-button.delete.is-success::after {
+[data-theme="light"] button.delete.is-success::before,
+[data-theme="light"] button.delete.is-success::after {
     background-color: #2c9659;
 }
-button.delete.is-danger::before,
-button.delete.is-danger::after {
+[data-theme="light"] button.delete.is-danger::before,
+[data-theme="light"] button.delete.is-danger::after {
     background-color: #c32841;
 }
-button.delete.is-info::before,
-button.delete.is-info::after {
+[data-theme="light"] button.delete.is-info::before,
+[data-theme="light"] button.delete.is-info::after {
     background-color: #237fbd;
 }
+[data-theme="dark"] button.delete::before,
+[data-theme="dark"] button.delete::after {
+    background-color: #FFFFFF;
+}
 
 /* Give outlines to active tags */
 span.filter-box-tag,
diff --git a/pydis_site/static/images/resources/adafruit.png b/pydis_site/static/images/resources/adafruit.png
new file mode 100644
index 00000000..82cd45ac
--- /dev/null
+++ b/pydis_site/static/images/resources/adafruit.png
diff --git a/pydis_site/static/images/resources/kivy.png b/pydis_site/static/images/resources/kivy.png
new file mode 100644
index 00000000..693b1834
--- /dev/null
+++ b/pydis_site/static/images/resources/kivy.png
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/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);
+    });
+});