2 files changed, 100 insertions, 0 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;
+}