diff --git a/README.md b/README.md
index 266aba6..39ad58d 100644
--- a/README.md
+++ b/README.md
@@ -62,3 +62,6 @@ The file is in this format:
 
 Publishing the site content requires AWS credentials which are not stored in this repository. Attempts to use the `gulp publish` command will fail.
 
+## Attributions
+
+Sun/moon svg icons forked from [glow-ui/glow-icons](https://github.com/glow-ui/glow-icons). Licensed under the [MIT license](https://github.com/glow-ui/glow-icons/blob/main/LICENSE).
diff --git a/js/_dark.js b/js/_dark.js
new file mode 100644
index 0000000..eefb467
--- /dev/null
+++ b/js/_dark.js
@@ -0,0 +1,25 @@
+(function () {
+  // Check if local storage is available and if dark mode is set; overrides everything else
+  if (window.localStorage && window.localStorage.getItem('dark-mode') !== null) {
+    if (window.localStorage.getItem('dark-mode') === 'true') {
+      document.documentElement.classList.add('dark-mode');
+    }
+  // Evaluate device preferences
+  } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.documentElement.classList.add('dark-mode');
+  }
+}());
+
+$(function () {
+  $('.dark-toggle').on('click', function toggleDarkMode (e) {
+    e.preventDefault();
+
+    if (document.documentElement.classList.contains('dark-mode')) {
+      document.documentElement.classList.remove('dark-mode');
+      window.localStorage.setItem('dark-mode', 'false');
+    } else {
+      document.documentElement.classList.add('dark-mode');
+      window.localStorage.setItem('dark-mode', 'true');
+    }
+  });
+});
diff --git a/scss/_card.scss b/scss/_card.scss
index e220200..fc0394f 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -3,12 +3,30 @@
   text-decoration: none;
   background: white;
 
+  @include dark-mode {
+    background: $content-bg-dark;
+    border: 1px solid $primary;
+    box-shadow: 0 0 5px 2px rgba($primary, 0.5);
+
+    .card-header {
+      background: lighten($content-bg-dark, 5);
+    }
+  }
+
   &.borderless {
     border: none;
+
+    @include dark-mode {
+      box-shadow: none;
+    }
   }
 
   .card-img, .card-img-top {
     // width: unset;
+    @include dark-mode {
+      // Some card images don't work on dark backgrounds
+      background-color: white;
+    }
   }
 
   .card-img-top + .card-img-top {
@@ -23,6 +41,10 @@
     font-size: 12px;
     font-family: $font-secondary;
 
+    @include dark-mode {
+      color: $body-color-dark;
+    }
+
     ul { padding-left: 1.2em; }
   }
 
@@ -70,6 +92,10 @@
     font-family: Roboto, Helvetica, Arial,sans-serif;
     text-decoration:none;
 
+    @include dark-mode {
+      background: $content-bg-dark;
+      color: $body-color-dark;
+    }
 
     .ig-header {
       display: flex;
diff --git a/scss/_dark.scss b/scss/_dark.scss
new file mode 100644
index 0000000..565f849
--- /dev/null
+++ b/scss/_dark.scss
@@ -0,0 +1,17 @@
+$disable-dark-mode: false !default;
+
+@mixin dark-mode {
+  @if not $disable-dark-mode {
+    .dark-mode & {
+      @content
+    }
+  }
+}
+
+@mixin light-mode {
+  @if not $disable-dark-mode {
+    :root:not(.dark-mode) & {
+      @content
+    }
+  }
+}
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
new file mode 100644
index 0000000..495de2a
--- /dev/null
+++ b/scss/_dropdown.scss
@@ -0,0 +1,13 @@
+.dropdown-menu {
+  @include dark-mode {
+    background-color: #2d2d2d;
+
+    .dropdown-item, .dropdown-item:hover:active:not(.active) {
+      color: white;
+    }
+
+    .dropdown-item:hover:not(:active) {
+      color: black;
+    }
+  }
+}
diff --git a/scss/_global.scss b/scss/_global.scss
index f37f3fd..f57760b 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -1,6 +1,19 @@
+a {
+  @include dark-mode {
+    color: lighten($primary, 10%);
+      
+    &:hover {
+      color: lighten($primary, 20%);
+    }
+  }
+}
 
 body {
   font-family: $font-primary;
+  
+  @include dark-mode {
+    color: $body-color-dark;
+  }
 }
 
 // Prevents the page header from blocking view of
@@ -16,6 +29,10 @@ body {
 }
 h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
   background-color: yellow !important;
+
+  @include dark-mode {
+    color: black;
+  }
 }
 
 span.svg-icon {
diff --git a/scss/_header.scss b/scss/_header.scss
index ef64f92..a11553a 100644
--- a/scss/_header.scss
+++ b/scss/_header.scss
@@ -10,6 +10,10 @@
       text-decoration: none;
     }
   }
+
+  @include dark-mode {
+    color: $body-color-dark;
+  }
 }
 
 body.inner-page header {
@@ -63,6 +67,12 @@ header {
     @media (max-width: 500px) {
       font-size: 1.8em;
     }
+
+    @include dark-mode {
+      abbr {
+        color: $primary;
+      }
+    }
   }
 
   &.active {
@@ -72,13 +82,16 @@ header {
       .top-brand {
         max-height: 0;
       }
+
+      .top-nav.aux-nav {
+        display: none;
+      }
     }
   }
 
 
   nav {
     flex: 1;
-    max-width: 1200px;
 
     display: flex;
     justify-content: space-between;
@@ -92,6 +105,36 @@ header {
     @media (max-width: 500px) {
       font-size: 0.8rem;
     }
+
+    @include dark-mode {
+      a {
+        color: inherit;
+
+        &:hover {
+          color: inherit;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .top-nav {
+    &.main-nav {
+      margin-left: auto;
+      order: 2;
+
+      @media (max-width: 800px) {
+        margin-left: 0;
+      }
+    }
+
+    &.aux-nav {
+      order: 3;
+
+      @media (max-width: 800px) {
+        order: 1;
+      }
+    }
   }
 
   .top-nav-inner {
@@ -99,13 +142,9 @@ header {
     justify-content: space-between;
     align-items: center;
     list-style: none;
-    margin: 0 0 0 1em;
+    margin: 0;
     padding: 0;
 
-    @media (max-width: 800px) {
-      margin: 0;
-    }
-
 
     .top-nav-item {
       transition-property: color, padding, margin;
@@ -144,38 +183,49 @@ header {
       }
     }
 
-    @media (max-width: 400px) {
-      .disposable {
-        display: none;
-      }
-    }
-
     .dropdown-menu {
       max-height: 90vh;
       overflow: auto;
     }
-  }
 
-  @media (max-width: 500px) {
+    .dark-toggle {
+      display: grid;
 
-    .top-nav-inner .disposable {
-      transition: max-width 0.5s ease-out;
-      max-width: 50px;
-    }
+      > span {
+        grid-column: 1;
+        grid-row: 1;
+        transition: all 0.5s;
+        transition-behavior: allow-discrete;
+      }
 
-    &.active .top-nav-inner .disposable {
-      max-width: 0;
-      overflow: hidden;
+      .dark-toggle-sun {
+        opacity: 1;
+      }
+
+      .dark-toggle-moon {
+        opacity: 0;
+      }
+
+      @include dark-mode {
+        .dark-toggle-sun {
+          opacity: 0;
+        }
+
+        .dark-toggle-moon {
+          opacity: 1;
+        }
+      }
     }
   }
-
 }
 
-// @media (min-width: 500px) {
-  body:not(.front-page) header + * {
-    margin-top: $header-full-height;
+body:not(.front-page) header + * {
+  margin-top: $header-mobile-height;
+
+  @media (min-width: 800px) {
+    margin-top: $header-desktop-height;
   }
-// }
+}
 
 .disclaimer {
   $cwColor: darken($gray-100, 2%);
@@ -193,6 +243,12 @@ header {
 
   background-color: $cwColor;
 
+  @include dark-mode {
+    background-color: $gray-800;
+    color: white;
+    border-bottom: 1px solid $primary;
+  }
+
   font-size: 0.8rem;
   font-weight: 300;
 
diff --git a/scss/_index.scss b/scss/_index.scss
index f65293a..9e36f00 100644
--- a/scss/_index.scss
+++ b/scss/_index.scss
@@ -1,11 +1,25 @@
 .front-page {
+  @include dark-mode {
+    background-color: #000;
+  }
+
+  header.active {
+    @include dark-mode {
+      background-color: $gray-900;
+    }
+  }
 
   .top-fold {
     min-height: 100vh;
     background-color: $header-bg-mid;
     background-image: linear-gradient(135deg, $header-bg-1, $header-bg-2);
 
-    padding-top: $header-full-height;
+    padding-top: 150px;
+
+    @include dark-mode {
+      background-color: inherit;
+      background-image: none;
+    }
 
     @media (max-width: 400px) {
       padding-top: 100px;
@@ -33,6 +47,13 @@
       text-shadow: 0px 1px 3px rgba(black, 0.9);
       color: $gray-100;
 
+      @include dark-mode {
+        background: darken($trans-blue-darkest, 10%);
+        border: 1px solid #0087bb;
+        box-shadow: 0 0 5px 2px rgba($trans-blue, .5);
+        color: $body-color-dark;
+      }
+
       max-width: 500px;
       width: 50vw;
       font-family: $font-secondary;
@@ -60,6 +81,17 @@
       box-shadow: inset 0px 1px 5px rgba(#000, 0.2), 0px 1px 5px rgba(#000, 0.9);
       text-shadow: 0px 1px 3px rgba(#fff, 0.6);
 
+      @include dark-mode {
+        background-color: $content-bg-dark;
+        box-shadow: 0 0 1pc 6px $primary;
+        color: $body-color-dark;
+        text-shadow: none;
+
+        @media (max-width: 800px) {
+          box-shadow: none;
+        }
+      }
+
       max-width: 850px;
       margin-left: 0.5em;
     }
@@ -83,6 +115,13 @@
       }
     }
 
+    @media (max-width: 500px) {
+      .copy {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+
   }
 
   .pager {
diff --git a/scss/_markup.scss b/scss/_markup.scss
index aafc0ae..777c3ae 100644
--- a/scss/_markup.scss
+++ b/scss/_markup.scss
@@ -1,16 +1,19 @@
 
 .markup {
   -webkit-font-smoothing: antialiased;
+  transition: background-color 0.5s;
 
   p a {
     transition-property: color, padding, margin;
     transition-duration: 0.3s;
     transition-timing-function: ease;
-    color: $primary;
     text-decoration: underline;
 
-    &:hover {
-      color: #e84992;
+    @include light-mode {
+      color: $primary;
+      &:hover {
+        color: #e84992;
+      }
     }
   }
 
@@ -34,6 +37,13 @@
     padding: 15px;
     color: black;
 
+    @include dark-mode {
+      background: darken($trans-blue-darkest, 10%);
+      border: 1px solid #0087bb;
+      color: $body-color-dark;
+      box-shadow: 0 0 5px 2px rgba($trans-blue,0.5);
+    }
+
     color-adjust: exact;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
@@ -87,6 +97,12 @@
       img {
         height: 1em;
       }
+
+      @include dark-mode {
+        // Convert the black svg icon to the $primary color at runtime using CSS filters
+        // https://stackoverflow.com/a/43960991
+        filter: invert(34%) sepia(87%) saturate(2698%) hue-rotate(313deg) brightness(108%) contrast(98%);
+      }
     }
 
     + {
@@ -152,6 +168,11 @@
   -webkit-print-color-adjust: exact;
   print-color-adjust: exact;
 
+  @include dark-mode {
+    background-color: lighten($content-bg-dark, 5%);
+    color: #fff;
+  }
+
   font-size: 0.8rem;
   font-weight: 300;
 
diff --git a/scss/_page.scss b/scss/_page.scss
index b8731af..a03564d 100644
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -7,6 +7,10 @@ body.page, body.post {
   header {
     background: $gray-800;
     &.active { background: white; }
+
+    @include dark-mode {
+      background: $gray-900;
+    }
   }
 
 }
@@ -27,15 +31,32 @@ body.post {
 }
 
 body.gdb {
+  transition: background-color 0.5s;
+
+  @include dark-mode {
+    background-color: $body-bg-dark;
+  }
 
   #body {
     background-color: $gutter-bg;
+    border-bottom: 1px solid $gutter-border;
+
+    @include dark-mode {
+      background-color: $gutter-bg-dark;
+      border-bottom: 1px solid $gutter-border-dark;
+      color: $body-color-dark;
+      box-shadow: 0px 6px 11px -6px $gutter-border-dark;
+    }
 
     @media (max-width: 500px) {
       border-left: 1px solid $gutter-border;
       border-right: 1px solid $gutter-border;
+
+      @include dark-mode {
+        border-left: 0;
+        border-right: 0;
+      }
     }
-    border-bottom: 1px solid $gutter-border;
 
     max-width: 1200px;
     margin-left: auto;
@@ -54,6 +75,11 @@ body.gdb {
     background: $content-bg;
     border-right: 1px solid $gutter-border;
 
+    @include dark-mode {
+      background: $content-bg-dark;
+      border-right: none;
+    }
+
     padding: 1em 1em;
 
     > h1:first-child {
diff --git a/scss/_pager.scss b/scss/_pager.scss
index 78e0260..35f4a6c 100644
--- a/scss/_pager.scss
+++ b/scss/_pager.scss
@@ -33,6 +33,12 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    @include dark-mode {
+      &:hover {
+        color: white;
+      }
+    }
   }
 
   .btn.left {
diff --git a/scss/_tweet.scss b/scss/_tweet.scss
index 9a40b64..7f3fa62 100644
--- a/scss/_tweet.scss
+++ b/scss/_tweet.scss
@@ -8,6 +8,10 @@
   $borderRadius: .35em;
   $avatarSize: 36px;
 
+  $borderColorDark: $trans-blue-dark;
+  $textLightDark: #697882;
+  $textDarkDark: #b4d0dd;
+
   font-size: 12px;
   body.post & {
     font-size: 15px;
@@ -22,6 +26,15 @@
   overflow-x: hidden;
   overflow-y: auto;
 
+  @include dark-mode {
+    background-color: $content-bg-dark;
+    border-color: $borderColorDark;
+
+    &:not(.grid-row) {
+      box-shadow: 0 0 5px 2px rgba($trans-blue, 0.5);
+    }
+  }
+
   page-break-inside: avoid;
 
   @include media-breakpoint-up(md) {
@@ -47,6 +60,10 @@
     border-top: 1px solid $borderColor;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+
+    @include dark-mode {
+      border-top: 1px solid $borderColorDark;
+    }
   }
 
   .tweet-item:first-child .tweet-logo { display: block; }
@@ -69,6 +86,10 @@
     margin-bottom: 1em;
     line-height: 1;
 
+    @include dark-mode {
+      color: $textDarkDark;
+    }
+
     &:hover {
       color: $textHover;
     }
@@ -348,6 +369,10 @@
     .tweet-item {
       border-top: none;
       padding: 0;
+
+      @include dark-mode {
+        border-top: none;
+      }
     }
 
     .tweet-item + .tweet-item {
@@ -383,6 +408,13 @@
     border: none;
     max-height: unset;
 
+    @include dark-mode {
+      // Box shadow hackery
+      margin-left: -1em;
+      margin-right: -1em;
+      padding: 1em;
+    }
+
     .tweet-item {
       background-color: white;
       border: 1px solid $borderColor;
@@ -391,6 +423,12 @@
       border-top-left-radius: $borderRadius;
       border-top-right-radius: $borderRadius;
 
+      @include dark-mode {
+        background-color: $content-bg-dark;
+        border: 1px solid $borderColorDark;
+        box-shadow: 0 0 5px 2px rgba($trans-blue, 0.5);
+      }
+
       .tweet-logo { display: block; }
 
       .tweet-text {
@@ -416,6 +454,11 @@
       flex-direction: column;
       margin: -1px;
 
+      @include dark-mode {
+        background-color: $content-bg-dark;
+        
+      }
+
       .tweet-logo { display: block; }
 
       .tweet-text {
diff --git a/scss/print.scss b/scss/print.scss
index c571df1..e0b52ea 100644
--- a/scss/print.scss
+++ b/scss/print.scss
@@ -11,6 +11,8 @@ $font-brand: 'Sriracha', Geneva, monospace;
 $font-family-sans-serif: $font-primary;
 $font-family-base: $font-primary;
 
+$disable-dark-mode: true;
+
 $grid-breakpoints: (
   xs: 0,
   sm: 500px,
@@ -94,6 +96,7 @@ $header-full-height: 100px;
 @import "bootstrap/scss/utilities";
 // @import "bootstrap/scss/print";
 
+@import "./dark";  // Need to disable for print styles
 @import "./global";
 // @import "./header";
 @import "./footer";
diff --git a/scss/style.scss b/scss/style.scss
index 6ba4d2f..491f81c 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -52,7 +52,18 @@ $primary: #fc0a7e;
 $header-bg-1: #E81179;
 $header-bg-2: #281362;
 $header-bg-mid: mix($header-bg-1, $header-bg-2);
-$header-full-height: 100px;
+$header-desktop-height: 100px;
+$header-mobile-height: 142px;
+
+/* -- Dark Mode -- */
+$body-bg-dark: black;
+$body-color-dark: #e2e2e2;
+$content-bg-dark: #222;
+$gutter-bg-dark: #171717;
+$gutter-border-dark: #fc0a7e;
+
+$primary-light-dark: lighten($primary, 10%);
+$primary-lighter-dark: lighten($primary, 10%);
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
@@ -94,8 +105,10 @@ $header-full-height: 100px;
 @import "bootstrap/scss/utilities";
 // @import "bootstrap/scss/print";
 
+@import "./dark";
 @import "./global";
 @import "./header";
+@import "./dropdown";
 @import "./footer";
 @import "./tweet";
 @import "./index";
@@ -108,4 +121,4 @@ $header-full-height: 100px;
 @import "./longform";
 @import "./font-compatibility";
 
-|node_modules/magnific-popup/dist/magnific-popup.css|
+//|node_modules/magnific-popup/dist/magnific-popup.css|
diff --git a/svg/moon.svg b/svg/moon.svg
new file mode 100644
index 0000000..4862d8a
--- /dev/null
+++ b/svg/moon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill="currentColor" d="M12.0557 3.59974C12.2752 3.2813 12.2913 2.86484 12.0972 2.53033C11.9031 2.19582 11.5335 2.00324 11.1481 2.03579C6.02351 2.46868 2 6.76392 2 12C2 17.5228 6.47715 22 12 22C17.236 22 21.5313 17.9764 21.9642 12.8518C21.9967 12.4664 21.8041 12.0968 21.4696 11.9027C21.1351 11.7086 20.7187 11.7248 20.4002 11.9443C19.4341 12.6102 18.2641 13 17 13C13.6863 13 11 10.3137 11 6.99996C11 5.73589 11.3898 4.56587 12.0557 3.59974Z"/>
+</svg>
diff --git a/svg/sun.svg b/svg/sun.svg
new file mode 100644
index 0000000..aeca207
--- /dev/null
+++ b/svg/sun.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill="currentColor" d="M11.75 5.5C11.1977 5.5 10.75 5.05228 10.75 4.5V2C10.75 1.44772 11.1977 1 11.75 1H12.25C12.8023 1 13.25 1.44772 13.25 2V4.5C13.25 5.05228 12.8023 5.5 12.25 5.5H11.75Z"/>
+<path fill="currentColor" d="M16.4194 7.22698C16.0289 6.83646 16.0289 6.20329 16.4194 5.81277L18.1872 4.045C18.5777 3.65447 19.2109 3.65447 19.6014 4.045L19.9549 4.39855C20.3455 4.78908 20.3455 5.42224 19.9549 5.81277L18.1872 7.58053C17.7967 7.97106 17.1635 7.97106 16.773 7.58053L16.4194 7.22698Z"/>
+<path fill="currentColor" d="M18.5 11.75C18.5 11.1977 18.9477 10.75 19.5 10.75H22C22.5523 10.75 23 11.1977 23 11.75V12.25C23 12.8023 22.5523 13.25 22 13.25H19.5C18.9477 13.25 18.5 12.8023 18.5 12.25V11.75Z"/>
+<path fill="currentColor" d="M16.7728 16.4194C17.1633 16.0289 17.7965 16.0289 18.187 16.4194L19.9548 18.1872C20.3453 18.5777 20.3453 19.2109 19.9548 19.6014L19.6012 19.9549C19.2107 20.3455 18.5775 20.3455 18.187 19.9549L16.4192 18.1872C16.0287 17.7967 16.0287 17.1635 16.4192 16.773L16.7728 16.4194Z"/>
+<path fill="currentColor" d="M12.25 18.5C12.8023 18.5 13.25 18.9477 13.25 19.5V22C13.25 22.5523 12.8023 23 12.25 23H11.75C11.1977 23 10.75 22.5523 10.75 22V19.5C10.75 18.9477 11.1977 18.5 11.75 18.5H12.25Z"/>
+<path fill="currentColor" d="M7.58059 16.773C7.97111 17.1635 7.97111 17.7967 7.58059 18.1872L5.81282 19.955C5.4223 20.3455 4.78913 20.3455 4.39861 19.955L4.04505 19.6014C3.65453 19.2109 3.65453 18.5778 4.04505 18.1872L5.81282 16.4195C6.20334 16.0289 6.83651 16.0289 7.22703 16.4195L7.58059 16.773Z"/>
+<path fill="currentColor" d="M5.5 12.25C5.5 12.8023 5.05228 13.25 4.5 13.25H2C1.44772 13.25 1 12.8023 1 12.25V11.75C1 11.1977 1.44772 10.75 2 10.75H4.5C5.05228 10.75 5.5 11.1977 5.5 11.75V12.25Z"/>
+<path fill="currentColor" d="M7.22722 7.58059C6.8367 7.97111 6.20353 7.97111 5.81301 7.58059L4.04524 5.81282C3.65472 5.4223 3.65472 4.78913 4.04524 4.39861L4.3988 4.04505C4.78932 3.65453 5.42248 3.65453 5.81301 4.04505L7.58078 5.81282C7.9713 6.20334 7.9713 6.83651 7.58078 7.22703L7.22722 7.58059Z"/>
+<path fill="currentColor" d="M7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z"/>
+</svg>
diff --git a/templates/layout.hbs b/templates/layout.hbs
index 47fd391..3faec1f 100644
--- a/templates/layout.hbs
+++ b/templates/layout.hbs
@@ -61,7 +61,7 @@
       <nav>
         <a href="/{{page.lang}}" class="top-brand">{{{lang 'HEADER_TITLE'}}}</a>
 
-        <div class="top-nav">
+        <div class="top-nav main-nav">
           <ul class="top-nav-inner">
             <li>{{import (join [ '/public/' page.lang '/_menu' ] "")}}</li>
             <li>
@@ -69,9 +69,20 @@
               {{import "~/language-menu"}}
             </li>
             <li><a href="/tweets/" class="top-nav-item" title="{{{lang 'TRANS_TWITTER_TOPICS'}}}"><img src="/images/transtwitter.png" width="24" height="24" alt=""></a></li>
-            <li class="disposable"><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi" class="top-nav-item">{{icon 'brands/github'}}</a></li>
-            <li class="disposable"><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
-            <li class="disposable"><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
+          </ul>
+        </div>
+
+        <div class="top-nav aux-nav">
+          <ul class="top-nav-inner">
+            <li><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi" class="top-nav-item">{{icon 'brands/github'}}</a></li>
+            <li><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
+            <li><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
+            <li>
+              <a href="#" class="top-nav-item dark-toggle" title="Dark Mode">
+                <span class="svg-icon dark-toggle-sun">{{icon 'sun'}}</span>
+                <span class="svg-icon dark-toggle-moon">{{icon 'moon'}}</span>
+              </a>
+            </li>
           </ul>
         </div>
       </nav>