3 files changed, 24 insertions, 6 deletions
diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html
index b7322f12..e497298a 100644
--- a/pydis_site/templates/base/base.html
+++ b/pydis_site/templates/base/base.html
@@ -24,6 +24,8 @@
   <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" %}">
   {% block head %}{% endblock %}
diff --git a/pydis_site/templates/base/footer.html b/pydis_site/templates/base/footer.html
index 0bc93578..9beb284f 100644
--- a/pydis_site/templates/base/footer.html
+++ b/pydis_site/templates/base/footer.html
@@ -1,5 +1,5 @@
-<footer class="footer has-background-dark has-text-light">
-  <div class="content has-text-centered">
+<footer class="footer has-background-grey-darker">
+  <div class="content has-text-centered has-text-grey-lighter">
     <p>
       Powered by <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085"><span id="linode-logo">Linode</span></a> and <a href="https://www.netcup.eu/"><span id="netcup-logo">netcup</span></a><br>Built with <a href="https://www.djangoproject.com/"><span id="django-logo">django</span></a> and <a href="https://bulma.io"><span id="bulma-logo">Bulma</span></a> <br/> &copy; {% now "Y" %} <span id="pydis-text">Python Discord</span>
     </p>
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index 931693c8..2fcd8ad8 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -1,5 +1,11 @@
 {% 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>
+{% endblock %}
+
 <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
 
@@ -39,7 +45,7 @@
 
       {# YouTube #}
       <a class="navbar-item" href="https://youtube.com/pythondiscord">
-        <span class="icon is-size-4 is-medium"><i class="fab fa-youtube"></i></span>
+        <span class="icon is-size-4 is-medium is-dark"><i class="fab fa-youtube"></i></span>
         <span>&nbsp;YouTube</span>
       </a>
 
@@ -97,12 +103,22 @@
         </div>
       </div>
 
-      {# Desktop Nav Discord  #}
-      <div id="discord-btn" class="buttons is-hidden-touch">
+      {# 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 id="theme-knob" class="knob dark"></div>
+          <i class="theme-icon dark gg-moon"></i>
+        </div>
+      </div>
+
+      {# Desktop Nav Discord #}
+      <div id="discord-btn" class="buttons is-hidden-touch is-white">
         <a href="https://discord.gg/python" class="button is-large is-primary">Discord</a>
       </div>
 
     </div>
-
   </div>
 </nav>