diff --git a/_includes/footer.html b/_includes/footer.html
index 301c058..db8c892 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,6 +1,7 @@
 <footer>
   <p>© {{ site.time | date: '%Y' }} elementary, Inc</p>
   <ul>
+    <li><a href="#" id="toggle-night-mode" class="hidden">Toggle night mode</a></li>
     <li><a href="https://elementary.io/press" target="_self">Press</a></li>
     <li><a href="https://elementary.io/brand" target="_self">Brand</a></li>
     <li><a href="https://elementary.io/oem" target="_self">OEMs</a></li>
diff --git a/_includes/scripts.html b/_includes/scripts.html
index 7a784fd..586ec22 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -12,5 +12,34 @@
       }
     });
   });
+
+  // Toggle night mode
+  // Show toggle trigger if JS enabled
+  const trigger = document.getElementById('toggle-night-mode');
+  trigger.classList.remove('hidden');
+  if (localStorage.getItem('mode') === 'dark') {
+    document.body.classList.add('dark-mode');
+  } else if (localStorage.getItem('mode') === 'light') {
+    document.body.classList.add('light-mode');
+  }
+  trigger.addEventListener('click', e => {
+    e.preventDefault();
+    switch (localStorage.getItem('mode')) {
+      case 'dark':
+        localStorage.setItem('mode', 'light');
+        document.body.classList.remove('dark-mode');
+        document.body.classList.add('light-mode');
+        break;
+      case 'light':
+        localStorage.setItem('mode', 'dark');
+        document.body.classList.remove('light-mode');
+        document.body.classList.add('dark-mode');
+        break;
+      default:
+        const targetMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? 'light' : 'dark';
+        localStorage.setItem('mode', targetMode);
+        document.body.classList.add(`${targetMode}-mode`);
+    }
+  })
 </script>
 
diff --git a/_sass/_byline.scss b/_sass/_byline.scss
index ac0b64c..1d00106 100644
--- a/_sass/_byline.scss
+++ b/_sass/_byline.scss
@@ -21,25 +21,13 @@
     &::before {
       content: "";
       border-radius: 50%;
-      box-shadow:
-        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
-        inset 0 0 0 2px rgba(255, 255, 255, 0.1),
-        inset 0 2px 0 0 rgba(255, 255, 255, 0.45),
-        inset 0 -2px 0 0 rgba(255, 255, 255, 0.15),
-        0 1px 3px 0 rgba(0, 0, 0, 0.12),
-        0 1px 2px 0 rgba(0, 0, 0, 0.24);
       height: 100%;
       position: absolute;
       width: 100%;
+      @include light-avatar-shadow;
 
       @media (prefers-color-scheme: dark) {
-        box-shadow:
-          inset 0 0 0 1px black,
-          inset 0 0 0 2px rgba(255, 255, 255, 0.05),
-          inset 0 2px 0 0 rgba(255, 255, 255, 0.22),
-          inset 0 -2px 0 0 rgba(255, 255, 255, 0.07),
-          0 1px 3px 0 rgba(0, 0, 0, 0.24),
-          0 1px 2px 0 rgba(0, 0, 0, 0.48);
+        @include dark-avatar-shadow;
       }
     }
   }
diff --git a/_sass/_code.scss b/_sass/_code.scss
index 4bb3757..a0a6979 100644
--- a/_sass/_code.scss
+++ b/_sass/_code.scss
@@ -45,44 +45,14 @@ code {
   margin: auto;
   overflow: auto;
   text-align: left;
-  background-color: var(--solarized-base3);
-  color: var(--solarized-base01);
+
+  @include light-highlight;
 
   .gl {
-    background-color: var(--solarized-base2);
     padding: 0 0.5em;
     text-align: right;
   }
 
-  .c,
-  .c1,
-  .cm,
-  .sb {
-    color: var(--solarized-base1);
-  }
-
-  .err,
-  .g,
-  .ge,
-  .go,
-  .gp,
-  .gs,
-  .gt,
-  .l,
-  .ld,
-  .n,
-  .na,
-  .nl,
-  .nn,
-  .nx,
-  .p,
-  .py,
-  .sd,
-  .sh,
-  .w {
-    color: var(--solarized-base01);
-  }
-
   .gd,
   .il,
   .m,
@@ -157,40 +127,6 @@ code {
 
 @media (prefers-color-scheme: dark) {
   .highlight {
-    background-color: var(--solarized-base03);
-    color: var(--solarized-base1);
-
-    .gl {
-      background-color: var(--solarized-base02);
-    }
-
-    .c,
-    .c1,
-    .cm,
-    .sb {
-      color: var(--solarized-base01);
-    }
-
-    .err,
-    .g,
-    .ge,
-    .go,
-    .gp,
-    .gs,
-    .gt,
-    .l,
-    .ld,
-    .n,
-    .na,
-    .nl,
-    .nn,
-    .nx,
-    .p,
-    .py,
-    .sd,
-    .sh,
-    .w {
-      color: var(--solarized-base1);
-    }
+    @include dark-highlight;
   }
 }
diff --git a/_sass/_colors.scss b/_sass/_colors.scss
index 99b8af3..8103490 100644
--- a/_sass/_colors.scss
+++ b/_sass/_colors.scss
@@ -72,22 +72,14 @@
   --solarized-red: #dc322f;
   --solarized-yellow: #b58900;
 
-  --bg-color: white;
-  --fg-color: var(--black-500);
-  --accent-color: var(--blueberry-700);
   --header-bg-color: var(--blueberry-300);
   --header-fg-color: var(--silver-100);
-  --secondary-bg-color: #f5f5f5; // Instead of making up a Silver 200
-  --secondary-fg-color: var(--black-300);
+  @include light-root;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg-color: var(--black-700);
-    --fg-color: var(--silver-300);
-    --accent-color: var(--blueberry-300);
-    --secondary-bg-color: var(--black-500);
-    --secondary-fg-color: var(--silver-300);
+    @include dark-root;
   }
 }
 
diff --git a/_sass/_featured.scss b/_sass/_featured.scss
index a190d58..62d23de 100644
--- a/_sass/_featured.scss
+++ b/_sass/_featured.scss
@@ -60,18 +60,11 @@
   }
 
   .featured-image {
-    background-color: var(--silver-100);
+    @include light-image;
     background-origin: border-box;
     background-position: 50%;
     background-size: cover;
-    border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 0.25rem;
-    box-shadow:
-      inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
-      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
-      0 1px 3px rgba(0, 0, 0, 0.05),
-      0 1px 2px rgba(0, 0, 0, 0.1);
     display: inline-block;
     height: 320px;
     margin-bottom: 1rem;
@@ -90,14 +83,7 @@
     }
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--silver-900);
-      border: 1px solid black;
-      box-shadow:
-        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
-        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
-        inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
-        0 1px 3px rgba(0, 0, 0, 0.1),
-        0 1px 2px rgba(0, 0, 0, 0.2);
+      @include dark-image;
     }
 
     img {
diff --git a/_sass/_figures.scss b/_sass/_figures.scss
index 64e7eb1..9df83f8 100644
--- a/_sass/_figures.scss
+++ b/_sass/_figures.scss
@@ -126,13 +126,13 @@ figure {
 
   &.card {
     img {
-      background-color: var(--silver-100);
       box-shadow:
         0 0 0 1px rgba(0, 0, 0, 0.05),
         0 3px 3px rgba(0, 0, 0, 0.22);
+      @include light-figure;
 
       @media (prefers-color-scheme: dark) {
-        background-color: var(--silver-900);
+        @include dark-figure;
       }
     }
   }
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
new file mode 100644
index 0000000..9c9b458
--- /dev/null
+++ b/_sass/_mixins.scss
@@ -0,0 +1,141 @@
+@mixin dark-root {
+  --bg-color: var(--black-700);
+  --fg-color: var(--silver-300);
+  --accent-color: var(--blueberry-300);
+  --secondary-bg-color: var(--black-500);
+  --secondary-fg-color: var(--silver-300);
+}
+
+@mixin light-root {
+  --bg-color: white;
+  --fg-color: var(--black-500);
+  --accent-color: var(--blueberry-700);
+  --secondary-bg-color: #f5f5f5;
+  --secondary-fg-color: var(--black-300);
+}
+
+@mixin dark-avatar-shadow {
+  box-shadow:
+    inset 0 0 0 1px black,
+    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
+    inset 0 2px 0 0 rgba(255, 255, 255, 0.22),
+    inset 0 -2px 0 0 rgba(255, 255, 255, 0.07),
+    0 1px 3px 0 rgba(0, 0, 0, 0.24),
+    0 1px 2px 0 rgba(0, 0, 0, 0.48);
+}
+
+@mixin light-avatar-shadow {
+  box-shadow:
+    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
+    inset 0 0 0 2px rgba(255, 255, 255, 0.1),
+    inset 0 2px 0 0 rgba(255, 255, 255, 0.45),
+    inset 0 -2px 0 0 rgba(255, 255, 255, 0.15),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12),
+    0 1px 2px 0 rgba(0, 0, 0, 0.24);
+}
+
+@mixin dark-image {
+  background-color: var(--silver-900);
+  border: 1px solid black;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
+    0 1px 3px rgba(0, 0, 0, 0.1),
+    0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+@mixin light-image {
+  background-color: var(--silver-100);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
+    0 1px 3px rgba(0, 0, 0, 0.05),
+    0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+@mixin dark-highlight {
+  background-color: var(--solarized-base03);
+  color: var(--solarized-base1);
+
+  .gl {
+    background-color: var(--solarized-base02);
+  }
+
+  .c,
+  .c1,
+  .cm,
+  .sb {
+    color: var(--solarized-base01);
+  }
+
+  .err,
+  .g,
+  .ge,
+  .go,
+  .gp,
+  .gs,
+  .gt,
+  .l,
+  .ld,
+  .n,
+  .na,
+  .nl,
+  .nn,
+  .nx,
+  .p,
+  .py,
+  .sd,
+  .sh,
+  .w {
+    color: var(--solarized-base1);
+  }
+}
+
+@mixin light-highlight {
+  background-color: var(--solarized-base3);
+  color: var(--solarized-base01);
+
+  .gl {
+    background-color: var(--solarized-base2);
+  }
+
+  .c,
+  .c1,
+  .cm,
+  .sb {
+    color: var(--solarized-base1);
+  }
+
+  .err,
+  .g,
+  .ge,
+  .go,
+  .gp,
+  .gs,
+  .gt,
+  .l,
+  .ld,
+  .n,
+  .na,
+  .nl,
+  .nn,
+  .nx,
+  .p,
+  .py,
+  .sd,
+  .sh,
+  .w {
+    color: var(--solarized-base01);
+  }
+}
+
+@mixin dark-figure {
+  background-color: var(--silver-900);
+}
+
+@mixin light-figure {
+  background-color: var(--silver-100);
+}
diff --git a/_sass/_nightmode.scss b/_sass/_nightmode.scss
new file mode 100644
index 0000000..0dd3bcd
--- /dev/null
+++ b/_sass/_nightmode.scss
@@ -0,0 +1,58 @@
+:root {
+  .dark-mode {
+    @include dark-root;
+  }
+  .light-mode {
+    @include light-root;
+  }
+}
+
+.dark-mode {
+  .byline {
+    .avatar {
+      &::before {
+        @include dark-avatar-shadow;
+      }
+    }
+  }
+  .featured {
+    .featured-image {
+      @include dark-image;
+    }
+  }
+  .highlight {
+    @include dark-highlight;
+  }
+  figure {
+    &.card {
+      img {
+        @include dark-figure;
+      }
+    }
+  }
+}
+
+.light-mode {
+  .byline {
+    .avatar {
+      &::before {
+        @include light-avatar-shadow;
+      }
+    }
+  }
+  .featured {
+    .featured-image {
+      @include light-image;
+    }
+  }
+  .highlight {
+    @include light-highlight;
+  }
+  figure {
+    &.card {
+      img {
+        @include light-figure;
+      }
+    }
+  }
+}
diff --git a/css/main.scss b/css/main.scss
index 4059e11..568e743 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -4,9 +4,11 @@
 @charset "utf-8";
 
 // Global
+@import "mixins";
 @import "colors";
 @import "layout";
 @import "typography";
+@import "nightmode";
 
 // Components
 @import "byline";
@@ -113,3 +115,7 @@ nav.pagination {
   text-decoration: none;
 }
 
+.hidden {
+  display: none;
+}
+