Fix conflicts

42 files changed, 612 insertions, 41 deletions

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index 79a8a92d..cc8d13cb 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -23,6 +23,20 @@ main.site-content {
     padding-right: 0.8em;
 }
 
+[data-theme="dark"] .navbar.is-primary {
+    background-color: #3B4774;
+}
+
+/* No good way other than this for now, because the item hover background setting
+ * applies only for a navbar without is-primary.
+ */
+@media screen and (min-width: 1024px) {
+    [data-theme="dark"] .navbar.is-primary .navbar-end > a.navbar-item:hover,
+    [data-theme="dark"] .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link {
+        background-color: #455382;
+    }
+}
+
 .navbar-item .navbar-link {
     padding-left: 1.5em;
     padding-right: 2.5em;
@@ -58,6 +72,10 @@ main.site-content {
     overflow: hidden;
 }
 
+[data-theme="dark"] #discord-btn a {
+    background-color: #58689cff;
+}
+
 #discord-btn:hover a {
     box-shadow: 0 1px 4px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23);
     /*transform: scale(1.03) translate3d(0,0,0);*/
@@ -167,3 +185,16 @@ button.is-size-navbar-menu, a.is-size-navbar-menu {
         scroll-behavior: auto;
     }
 }
+
+[data-theme="dark"] .button.is-primary:hover, .button.is-primary.is-hovered,
+[data-theme="dark"] .button.is-link:hover, .button.is-link.is-hovered {
+    background-color: #6276BC;
+}
+
+[data-theme="dark"] .light-image {
+    display: none;
+}
+
+[data-theme="light"] .dark-image {
+    display: none;
+}
diff --git a/pydis_site/static/css/base/themes.css b/pydis_site/static/css/base/themes.css
new file mode 100644
index 00000000..d22c6c58
--- /dev/null
+++ b/pydis_site/static/css/base/themes.css
@@ -0,0 +1,69 @@
+/* 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;
+    border: solid 1px #515151;
+}
+
+.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: white;
+    margin: 7% auto auto 56%;
+}
+
+.theme-icon {
+    position: absolute !important;
+    --ggs: 0.75;
+    transition: opacity 0.1s ease-out;
+}
+
+.theme-icon.light {
+    left: 10%;
+    top: 15%;
+    color: white;
+}
+
+.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..034bf2fa 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -1,11 +1,15 @@
 .collapsible {
-  cursor: pointer;
-  width: 100%;
-  border: none;
-  outline: none;
+    cursor: pointer;
+    width: 100%;
+    border: none;
+    outline: none;
+}
+
+[data-theme="dark"] .collapsible {
+    background-color: #34353A;
 }
 
 .collapsible-content {
-  transition: max-height 0.3s ease-out;
-  overflow: hidden;
+    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..e80fdc13 100644
--- a/pydis_site/static/css/content/page.css
+++ b/pydis_site/static/css/content/page.css
@@ -27,6 +27,14 @@ i.has-icon-padding {
     flex-direction: column;
 }
 
+[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;
 }
@@ -110,3 +118,17 @@ a.dropdown-item {
     white-space: normal;
     padding-right: 0;
 }
+
+[data-theme="dark"] .card.github-card {
+    border: solid 1px #4E4F51;
+}
+
+[data-theme="dark"] hr {
+    background-color: #4c515a;
+}
+
+[data-theme="dark"] .has-dark-mode-background {
+    background-color: #EDEDED;
+    border-radius: .1rem;
+    padding: .3rem;
+}
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/events/base.css b/pydis_site/static/css/events/base.css
index 55725f75..ba3a7fc9 100644
--- a/pydis_site/static/css/events/base.css
+++ b/pydis_site/static/css/events/base.css
@@ -19,6 +19,20 @@ pre {
     margin-bottom: 0 !important
 }
 
+.sponsor {
+    border-radius: .1rem;
+    padding: .3rem;
+}
+
+.sponsor img {
+    display: block;
+    margin: auto;
+}
+
+.box .sponsor {
+    margin-bottom: 1rem;
+}
+
 .event-gallery .date-icon, #main-section .date-icon {
     margin-left: -.25rem;
 }
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index e117a35b..f21263db 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -23,6 +23,10 @@ h1 {
     padding: 0;
 }
 
+[data-theme="dark"] #wave-hero {
+    background-color: #3B4774;
+}
+
 #wave-hero .container {
     z-index: 4;  /* keep hero contents above wave animations */
 }
@@ -57,6 +61,16 @@ h1 {
     transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 }
 
+[data-theme="dark"] #wave-hero-right img {
+    -webkit-filter: brightness(0.9);
+    filter: brightness(0.9);
+}
+
+[data-theme="dark"] #wave-hero-right img:hover {
+    -webkit-filter: none;
+    filter: none;
+}
+
 #wave-hero-right img:hover {
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 }
@@ -72,13 +86,24 @@ h1 {
     transform: translate3d(0,0,0);  /* Trigger 3D acceleration for smoother animation */
 }
 
+[data-theme="dark"] #wave-hero .wave {
+    background: url(../../images/waves_dark/wave_dark.svg) repeat-x;
+}
+
 #front-wave {
     animation-duration: 60s;
     animation-delay: -50s;
-    opacity: 0.5;
     height: 178px;
 }
 
+[data-theme="light"] #front-wave {
+    opacity: 0.5;
+}
+
+[data-theme="dark"] #wave-hero #front-wave {
+    background: url(../../images/waves_dark/wave_darker.svg) repeat-x;
+}
+
 #back-wave {
     animation-duration: 65s;
     height: 198px;
@@ -92,6 +117,10 @@ h1 {
     z-index: 3;
 }
 
+[data-theme="dark"] #bottom-wave {
+    background: url(../../images/waves_dark/wave_black.svg) repeat-x !important;
+}
+
 @keyframes wave {
   0% {
     margin-left: 0;
@@ -153,10 +182,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 3px 3px rgba(0, 0, 0, 0.7);
+}
+
 #projects .card-header {
     box-shadow: none;
     font-size: 1.25rem;
@@ -173,10 +210,21 @@ h1 {
     color: #7289DA;
 }
 
+[data-theme="dark"] #projects .card-header-title {
+    /* 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 +266,64 @@ h1 {
     text-align: center;
 }
 
-#sponsors .columns {
-    display: block;
-    justify-content: center;
-    margin: auto;
-    max-width: 80%;
+#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;
+}
+
+@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);
+    }
 
-    max-height: 5rem;
+    #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..d42bbfc0 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 {
@@ -3424,6 +3426,10 @@ mark {
     background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05));
 }
 
+[data-theme="dark"] .cd-timeline {
+    background-color: #2C2F33;
+}
+
 .cd-timeline h2 {
     font-weight: 700
 }
@@ -3490,6 +3496,10 @@ mark {
     box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
 }
 
+[data-theme="dark"] .cd-timeline__img {
+    box-shadow: 0 0 0 4px var(--cd-color-2), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
+}
+
 .cd-timeline__img i {
     font-size: 1.5em;
     color: white;
@@ -3552,8 +3562,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 +3579,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 +3607,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..3bf5ade4 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -37,7 +37,7 @@ i.has-icon-padding {
     display: none;
 }
 #tab-content p.is-active {
-display: block;
+    display: block;
 }
 
 /* Disable highlighting for all text in the filters. */
@@ -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/events/Replit.png b/pydis_site/static/images/events/Replit.png
deleted file mode 100644
index a8202641..00000000
--- a/pydis_site/static/images/events/Replit.png
+++ /dev/null
diff --git a/pydis_site/static/images/events/DO_Logo_Vertical_Blue.png b/pydis_site/static/images/events/logos/DO_Logo_Vertical_Blue.png
index ad528652..ad528652 100644
--- a/pydis_site/static/images/events/DO_Logo_Vertical_Blue.png
+++ b/pydis_site/static/images/events/logos/DO_Logo_Vertical_Blue.png
diff --git a/pydis_site/static/images/events/logos/Replit.png b/pydis_site/static/images/events/logos/Replit.png
new file mode 100644
index 00000000..08033134
--- /dev/null
+++ b/pydis_site/static/images/events/logos/Replit.png
diff --git a/pydis_site/static/images/events/Tabnine.png b/pydis_site/static/images/events/logos/Tabnine.png
index eee42a5e..eee42a5e 100644
--- a/pydis_site/static/images/events/Tabnine.png
+++ b/pydis_site/static/images/events/logos/Tabnine.png
diff --git a/pydis_site/static/images/events/logos_dark/DO_Logo_Vertical_White.png b/pydis_site/static/images/events/logos_dark/DO_Logo_Vertical_White.png
new file mode 100644
index 00000000..d71b0714
--- /dev/null
+++ b/pydis_site/static/images/events/logos_dark/DO_Logo_Vertical_White.png
diff --git a/pydis_site/static/images/events/logos_dark/Replit.png b/pydis_site/static/images/events/logos_dark/Replit.png
new file mode 100644
index 00000000..c362df72
--- /dev/null
+++ b/pydis_site/static/images/events/logos_dark/Replit.png
diff --git a/pydis_site/static/images/events/logos_dark/django.png b/pydis_site/static/images/events/logos_dark/django.png
new file mode 100644
index 00000000..3d0bf011
--- /dev/null
+++ b/pydis_site/static/images/events/logos_dark/django.png
diff --git a/pydis_site/static/images/resources/adafruit.png b/pydis_site/static/images/resources/adafruit.png
new file mode 100644
index 00000000..652dbaeb
--- /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..025d0020
--- /dev/null
+++ b/pydis_site/static/images/resources/kivy.png
diff --git a/pydis_site/static/images/resources/panda3d.png b/pydis_site/static/images/resources/panda3d.png
new file mode 100644
index 00000000..8a1296ed
--- /dev/null
+++ b/pydis_site/static/images/resources/panda3d.png
diff --git a/pydis_site/static/images/resources_dark/adafruit.png b/pydis_site/static/images/resources_dark/adafruit.png
new file mode 100644
index 00000000..063f06ad
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/adafruit.png
diff --git a/pydis_site/static/images/resources_dark/coreyschafer.png b/pydis_site/static/images/resources_dark/coreyschafer.png
new file mode 100644
index 00000000..12ad14c9
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/coreyschafer.png
diff --git a/pydis_site/static/images/resources_dark/kivy.png b/pydis_site/static/images/resources_dark/kivy.png
new file mode 100644
index 00000000..ec124706
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/kivy.png
diff --git a/pydis_site/static/images/resources_dark/microsoft.png b/pydis_site/static/images/resources_dark/microsoft.png
new file mode 100644
index 00000000..75197bbf
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/microsoft.png
diff --git a/pydis_site/static/images/resources_dark/pallets.png b/pydis_site/static/images/resources_dark/pallets.png
new file mode 100644
index 00000000..e3ef3e05
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/pallets.png
diff --git a/pydis_site/static/images/resources_dark/panda3d.png b/pydis_site/static/images/resources_dark/panda3d.png
new file mode 100644
index 00000000..ed8878e3
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/panda3d.png
diff --git a/pydis_site/static/images/resources_dark/people_postgres_data.png b/pydis_site/static/images/resources_dark/people_postgres_data.png
new file mode 100644
index 00000000..8e207a62
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/people_postgres_data.png
diff --git a/pydis_site/static/images/resources_dark/pyglet.png b/pydis_site/static/images/resources_dark/pyglet.png
new file mode 100644
index 00000000..6e1a38ad
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/pyglet.png
diff --git a/pydis_site/static/images/resources_dark/python.png b/pydis_site/static/images/resources_dark/python.png
new file mode 100644
index 00000000..154cede4
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/python.png
diff --git a/pydis_site/static/images/resources_dark/sentdex.png b/pydis_site/static/images/resources_dark/sentdex.png
new file mode 100644
index 00000000..b264d82c
--- /dev/null
+++ b/pydis_site/static/images/resources_dark/sentdex.png
diff --git a/pydis_site/static/images/sponsors_dark/cloudflare.png b/pydis_site/static/images/sponsors_dark/cloudflare.png
new file mode 100644
index 00000000..dd31a33a
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/cloudflare.png
diff --git a/pydis_site/static/images/sponsors_dark/jetbrains.png b/pydis_site/static/images/sponsors_dark/jetbrains.png
new file mode 100644
index 00000000..00726b33
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/jetbrains.png
diff --git a/pydis_site/static/images/sponsors_dark/linode.png b/pydis_site/static/images/sponsors_dark/linode.png
new file mode 100644
index 00000000..d2b7baa4
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/linode.png
diff --git a/pydis_site/static/images/sponsors_dark/netcup.png b/pydis_site/static/images/sponsors_dark/netcup.png
new file mode 100644
index 00000000..4921b495
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/netcup.png
diff --git a/pydis_site/static/images/sponsors_dark/netlify.png b/pydis_site/static/images/sponsors_dark/netlify.png
new file mode 100644
index 00000000..3738f3fb
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/netlify.png
diff --git a/pydis_site/static/images/sponsors_dark/notion.png b/pydis_site/static/images/sponsors_dark/notion.png
new file mode 100644
index 00000000..f386320e
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/notion.png
diff --git a/pydis_site/static/images/sponsors_dark/sentry.png b/pydis_site/static/images/sponsors_dark/sentry.png
new file mode 100644
index 00000000..029c9e6f
--- /dev/null
+++ b/pydis_site/static/images/sponsors_dark/sentry.png
diff --git a/pydis_site/static/images/waves_dark/wave_black.svg b/pydis_site/static/images/waves_dark/wave_black.svg
new file mode 100644
index 00000000..716d0501
--- /dev/null
+++ b/pydis_site/static/images/waves_dark/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:#252629;fill-opacity:1;stroke-width:0.381026" />
+</svg>
diff --git a/pydis_site/static/images/waves_dark/wave_dark.svg b/pydis_site/static/images/waves_dark/wave_dark.svg
new file mode 100644
index 00000000..0ba3d146
--- /dev/null
+++ b/pydis_site/static/images/waves_dark/wave_dark.svg
@@ -0,0 +1,73 @@
+<?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="198"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="wave.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" />
+      </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="757.49384"
+     inkscape:cy="107.38903"
+     inkscape:window-x="4880"
+     inkscape:window-y="677"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <defs
+     id="defs7">
+    <linearGradient
+       id="a"
+       x1="50%"
+       x2="50%"
+       y1="-10.959%"
+       y2="100%">
+      <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.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z"
+     transform="matrix(-1 0 0 1 1600 0)"
+     id="path9"
+     style="fill:#455289;fill-opacity:1" />
+</svg>
diff --git a/pydis_site/static/images/waves_dark/wave_darker.svg b/pydis_site/static/images/waves_dark/wave_darker.svg
new file mode 100644
index 00000000..3cff0510
--- /dev/null
+++ b/pydis_site/static/images/waves_dark/wave_darker.svg
@@ -0,0 +1,73 @@
+<?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="198"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="wave.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" />
+      </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="757.49384"
+     inkscape:cy="107.38903"
+     inkscape:window-x="4880"
+     inkscape:window-y="677"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <defs
+     id="defs7">
+    <linearGradient
+       id="a"
+       x1="50%"
+       x2="50%"
+       y1="-10.959%"
+       y2="100%">
+      <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.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z"
+     transform="matrix(-1 0 0 1 1600 0)"
+     id="path9"
+     style="fill:#333c61;fill-opacity:1" />
+</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..46dba7b9
--- /dev/null
+++ b/pydis_site/static/js/base/themes.js
@@ -0,0 +1,94 @@
+"use strict";
+
+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.
+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) {
+    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":
+            stylesheet.href = "/static/css/bulma.css";
+            break;
+        case "dark":
+            stylesheet.href = "/static/css/dark_bulma.css";
+            break;
+    }
+
+    htmlTag.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;
+    }
+}
+
+let theme;
+const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+if (systemPrefersDark.matches)
+    theme = getCurrentTheme("dark");
+else
+    theme = getCurrentTheme();
+
+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
+        // on page reloads.
+        localStorage.removeItem("theme");
+        setStyleSheets(newTheme);
+        toggleThemeSwitch(newTheme);
+    })
+
+    const switchToggle = document.getElementById("theme-switch");
+    switchToggle.addEventListener("click", () => {
+        const newTheme = htmlTag.getAttribute("data-theme") === "light" ? "dark" : "light";
+        localStorage.setItem("theme", newTheme);
+        setStyleSheets(newTheme);
+        toggleThemeSwitch(newTheme);
+    });
+});