diff --git a/assets/scss/overrides.scss b/assets/scss/overrides.scss
index cd50bf549..febea94ce 100644
--- a/assets/scss/overrides.scss
+++ b/assets/scss/overrides.scss
@@ -1,4 +1,12 @@
 // The following variables can be overridden
 
-// The primary accent color can take any css color property, including hex, named props, rgba etc.
-// $primary:
+// The colors can take any css color property, including hex, named props, rgba etc.
+
+// $themes: (
+//   newTheme: (
+//     text: #hex,
+//     ...
+//   ),
+// );
+
+
diff --git a/assets/scss/pages/about.scss b/assets/scss/pages/about.scss
index 7c8e7f186..4490ed1b0 100644
--- a/assets/scss/pages/about.scss
+++ b/assets/scss/pages/about.scss
@@ -30,19 +30,25 @@
 }
 
 .fancy {
-  color: $primary;
+  @include theme() {
+    color: theme-get('accent');
+  }
 }
 
 .handle {
   display: inline-block;
   margin-top: 0.275em;
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   letter-spacing: 0.5px;
 }
 
 .writing {
+  @include theme() {
+    color: theme-get('accent');
+  }
   text-decoration: none;
-  color: $primary;
 }
 
 /* overrides */
diff --git a/assets/scss/pages/post.scss b/assets/scss/pages/post.scss
index 13c84c14f..3ff455fdc 100644
--- a/assets/scss/pages/post.scss
+++ b/assets/scss/pages/post.scss
@@ -28,13 +28,17 @@ $tocBreakpoint: 1024px;
       text-decoration: none;
       position: absolute;
       left: -1rem;
-      color: $grey;
+      @include theme() {
+        color: theme-get('neutral');
+      }
       font-size: 1.2rem;
       font-weight: 400;
     }
 
     .anchor:hover {
-      color: $darkGrey;
+      @include theme() {
+        color: theme-get('high-neutral');
+      }
     }
   }
 
@@ -44,7 +48,9 @@ $tocBreakpoint: 1024px;
     font-size: 1rem;
 
     a {
-      color: $darkGrey;
+      @include theme() {
+        color: theme-get('high-neutral');
+      }
       text-decoration: underline;
     }
   }
@@ -63,7 +69,9 @@ $tocBreakpoint: 1024px;
 }
 
 .post__date {
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   font-size: 0.8rem;
 }
 
@@ -126,12 +134,18 @@ $tocBreakpoint: 1024px;
   text-decoration: none;
   padding: 0.2em 0.4em;
   border-radius: 3px;
-  background: lighten($primary, 41%);
-  color: $primary;
+  @include theme() {
+    background: lighten(theme-get('accent'), 41%);;
+  }
+  @include theme() {
+    color: theme-get('accent');
+  }
   font-size: 0.8rem;
 
   &:hover {
-    background: lighten($primary, 38%);
+    @include theme() {
+      background: lighten(theme-get('accent'), 38%);
+    }
   }
 }
 
@@ -180,12 +194,16 @@ $tocBreakpoint: 1024px;
 }
 
 .pagination__label {
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   font-size: 0.8rem;
 }
 
 .pagination__title {
-  color: $black;
+  @include theme() {
+    color: theme-get('text');
+  }
   font-weight: 700;
   margin-top: 0.25rem;
 }
@@ -193,11 +211,15 @@ $tocBreakpoint: 1024px;
 footer {
   text-align: center;
   padding: 0 1.5rem;
-  background: $white;
+  @include theme() {
+    background: theme-get('bg');
+  }
 
   p {
     margin-top: 1rem; // reduce margin top due to social icons' padding
-    color: $grey;
+    @include theme() {
+      color: theme-get('neutral');
+    }
     font-size: 0.65rem;
   }
 }
@@ -212,12 +234,23 @@ footer {
 
       &::before {
         content: "-";
-        color: $darkGrey;
+        @include theme() {
+          color: theme-get('high-neutral');
+        }
         position: absolute;
         margin-left: -15px;
       }
     }
   }
+  
+  a[href] {
+    @include theme() {
+      color: theme-get('accent-text');
+      &:visited {
+        color: theme-get('accent-bg')
+      }
+    }
+  }
 }
 
 .twitter-tweet.twitter-tweet-rendered {
@@ -230,12 +263,16 @@ table {
   border-spacing: 0;
 
   thead {
-    background: $lightGrey;
+    @include theme() {
+      background: theme-get('low-neutral');
+    }
   }
 
   th,
   td {
     padding: 0.5em 1em;
-    border: 1px double $greyTableBorder;
+    @include theme() {
+      border: 1px double theme-get('neutral-table-border');
+    }
   }
 }
diff --git a/assets/scss/pages/posts.scss b/assets/scss/pages/posts.scss
index 4a89154ab..ab17f8cd2 100644
--- a/assets/scss/pages/posts.scss
+++ b/assets/scss/pages/posts.scss
@@ -36,7 +36,6 @@
 
 .tag__link {
   text-decoration: none;
-  color: $grey;
   font-size: 0.9rem;
 
   &::before {
@@ -45,8 +44,11 @@
     padding-right: 1px;
   }
 
-  &:hover {
-    color: $darkGrey;
+  @include theme() {
+  color: theme-get('neutral');
+    &:hover {
+      color: theme-get('high-neutral');
+    }
   }
 }
 
diff --git a/assets/scss/pages/tags.scss b/assets/scss/pages/tags.scss
index 3cc181fa9..1a278bae6 100644
--- a/assets/scss/pages/tags.scss
+++ b/assets/scss/pages/tags.scss
@@ -8,7 +8,9 @@
 
   a,
   .separator {
-    color: $grey;
+    @include theme() {
+      color: theme-get('neutral');
+    }
     font-size: 1.5rem;
   }
 
diff --git a/assets/scss/partials/_burger.scss b/assets/scss/partials/_burger.scss
index 07d43702f..a4df83d97 100644
--- a/assets/scss/partials/_burger.scss
+++ b/assets/scss/partials/_burger.scss
@@ -5,7 +5,9 @@
   padding: 0 1.5rem;
   position: fixed;
   width: 100%;
-  background: $white;
+  @include theme() {
+    background: theme-get('bg');
+  }
   z-index: 2;
 
   @media screen and (min-width: $medium) {
@@ -24,7 +26,9 @@
   position: absolute;
   width: $meatWidth;
   height: $meatHeight;
-  background: $black;
+  @include theme() {
+    background: theme-get('text');
+  }
   top: calc(50% - #{$meatHeight} / 2);
   left: calc(50% - #{$meatWidth} / 2);
   transition: all 150ms ease-in;
diff --git a/assets/scss/partials/_nav.scss b/assets/scss/partials/_nav.scss
index e323283d7..dd1772048 100644
--- a/assets/scss/partials/_nav.scss
+++ b/assets/scss/partials/_nav.scss
@@ -6,10 +6,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $white;
+  @include theme() {
+    background: theme-get('bg');
+  }
   visibility: hidden;
   z-index: 1;
-
   @media screen and (min-width: $medium) {
     display: block;
     visibility: visible;
@@ -64,16 +65,22 @@
 }
 
 .nav__list a {
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   text-decoration: none;
   font-size: 2em;
 
   &.active {
-    color: $black;
+    @include theme() {
+      color: theme-get('text');
+    }
   }
 
   &:hover {
-    color: $black;
+    @include theme() {
+      color: theme-get('text');
+    }
   }
 
   @media screen and (min-width: $medium) {
diff --git a/assets/scss/partials/_post-list.scss b/assets/scss/partials/_post-list.scss
index 544bf7071..8a82facee 100644
--- a/assets/scss/partials/_post-list.scss
+++ b/assets/scss/partials/_post-list.scss
@@ -23,12 +23,16 @@
   font-weight: 500;
 
   a {
-    color: $black;
+    @include theme() {
+      color: theme-get('text');
+    }
     text-decoration: none;
   }
 }
 
 .post__date {
-  color: $grey;
+  @include theme() {
+    color: theme-get('neutral');
+  }
   font-size: 0.8rem;
 }
diff --git a/assets/scss/partials/_reset.scss b/assets/scss/partials/_reset.scss
index 78ebe1605..93ec62433 100644
--- a/assets/scss/partials/_reset.scss
+++ b/assets/scss/partials/_reset.scss
@@ -1,7 +1,9 @@
 html,
 body {
-  background-color: $white;
-  color: $black;
+  @include theme() {
+    background-color: theme-get('bg');
+    color: theme-get('text');
+  }
   height: 100%;
 }
 
diff --git a/assets/scss/partials/_social-icons.scss b/assets/scss/partials/_social-icons.scss
index 4ece60dcd..e5de23e5f 100644
--- a/assets/scss/partials/_social-icons.scss
+++ b/assets/scss/partials/_social-icons.scss
@@ -15,5 +15,8 @@
     height: 1.4rem;
     background-size: contain;
     background-repeat: no-repeat;
+    @include theme() {
+      color: theme-get('text');
+    }
   }
 }
diff --git a/assets/scss/partials/_typography.scss b/assets/scss/partials/_typography.scss
index c695b0037..8164ea669 100644
--- a/assets/scss/partials/_typography.scss
+++ b/assets/scss/partials/_typography.scss
@@ -86,13 +86,17 @@ blockquote {
     margin-left: -0.2em;
 
     z-index: -1;
-    color: darken($white, 7%);
+    @include theme() {
+      color: darken(theme-get('bg'), 7%);
+    }
   }
 
   margin-top: $leading;
   margin-bottom: $leading;
   line-height: $leading;
-  color: $black;
+  @include theme() {
+    color: theme-get('text');
+  }
 
   cite {
     &::before {
@@ -101,7 +105,9 @@ blockquote {
 
     font-style: italic;
     font-size: 0.95em;
-    color: $darkGrey;
+    @include theme() {
+      color: theme-get('high-neutral');
+    }
   }
 }
 
diff --git a/assets/scss/partials/_vars.scss b/assets/scss/partials/_vars.scss
index c3c06ac94..e5838f7e2 100644
--- a/assets/scss/partials/_vars.scss
+++ b/assets/scss/partials/_vars.scss
@@ -3,19 +3,50 @@ $meatWidth: 28px;
 $meatHeight: 2px;
 $burgerContainerHeight: 4rem;
 
-// colors
-$black: #111;
-$lightGrey: #f7f7f7;
-$greyTableBorder: #eeeeee;
-$grey: #9b9b9b;
-$darkGrey: #717171;
-$white: #fff;
-$primary: #9013fe;
-
 // screenSizes
 $medium: 800px;
 $large: 1400px;
 
+@mixin theme() {
+  @each $theme, $map in $themes {
+    $theme-map: $map !global;
+    .#{$theme} & {
+      @content;
+    }
+  }
+  $theme-map: null !global;
+}
+
+@function theme-get($key) {
+  @return map-get($theme-map, $key);
+}
+
+// colors
+$themes: (
+  lightTheme: (
+    text: #111,
+    low-neutral: #f7f7f7,
+    neutral-table-border: #eeeeee,
+    neutral: #9b9b9b,
+    high-neutral: #717171,
+    bg: #fff,
+    accent: #9013FE,
+    accent-text: #580E99,
+    accent-bg: #A56AD9,
+  ),
+  darkTheme: (
+    text: #fff,
+    low-neutral: #717171,
+    neutral-table-border: #eeeeee,
+    neutral: #9b9b9b,
+    high-neutral: #f7f7f7,
+    bg: #111,
+    accent: #9013FE,
+    accent-text: #A56AD9,
+    accent-bg: #580E99,
+  ),
+);
+
 // import site overrides after variables after
 // variables have been declared
 @import "../overrides";
diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
index f29f1b2d5..d445e88fd 100644
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -1,4 +1,4 @@
 <a href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}" {{ end }}
   {{ if strings.HasPrefix .Destination "mailto" }} target="_blank" {{ end }}
   {{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noreferrer noopener" {{ end }}
->{{ .Text | safeHTML }}</a>
\ No newline at end of file
+>{{ .Text | safeHTML }}</a>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6190930b2..846f963cf 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}">
+<html lang="{{ .Site.LanguageCode }}" class="lightTheme" id="theme">
 
 <head>
   <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
@@ -22,6 +22,7 @@
   {{ end }}
 
   {{ partial "favicon.html" }}
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
 
   <!-- Styles -->
   {{ block "styles" . }} {{ end }} <!-- Get "style_opts" variable from "styles" block -->
@@ -42,7 +43,7 @@
   {{ partial "seo-schema.html" .}}
 
   {{- if not .Site.IsServer -}}
-      {{ template "_internal/google_analytics_async.html" . }}
+      {{ template "_internal/google_analytics.html" . }}
   {{- end -}}
 </head>
 
@@ -59,6 +60,7 @@
 
   {{ $script := resources.Get "js/index.js" | minify | fingerprint }}
   <script src="{{ $script.RelPermalink }}" integrity="{{ $script.Data.Integrity | safeHTMLAttr }}" crossorigin="anonymous"></script>
+  <script src="/js/dark-mode.js"></script>
   {{ block "scripts" . }} {{ end }}
 </body>
 
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index d3b9bcd39..4611948e0 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -7,5 +7,8 @@
         {{end}} href="{{ .URL }}">{{ .Name }}</a>
       </li>
     {{ end }}
+    <li>
+      <i class="fas fa-moon" id="dark-mode-toggle"></i>
+    </li>
   </ul>
 </nav>
diff --git a/layouts/partials/social-icons.html b/layouts/partials/social-icons.html
index 3250856ff..b6c0d382f 100644
--- a/layouts/partials/social-icons.html
+++ b/layouts/partials/social-icons.html
@@ -12,7 +12,11 @@
         target="_blank"
         rel="me noopener"
       >
-        <div class="social-icons__icon" style="background-image: url('{{print "svg/" $icon ".svg" | absURL}}')"></div>
+        {{ if eq $icon "email" }}
+          <i class="social-icons__icon fas fa-envelope fa-lg"></i>
+        {{ else }}
+          <i class="social-icons__icon fab fa-{{$icon}} fa-lg"></i>
+        {{ end }}
       </a>
     {{ end }}
   {{ end }}   
diff --git a/static/js/dark-mode.js b/static/js/dark-mode.js
new file mode 100644
index 000000000..14f091cfa
--- /dev/null
+++ b/static/js/dark-mode.js
@@ -0,0 +1,29 @@
+window.onload = function () {
+    var toggle = document.getElementById("dark-mode-toggle");
+    var theme = document.getElementById("theme");
+
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        setTheme(localStorage.getItem("dark-mode-storage") || "dark");
+    } else {
+        setTheme(localStorage.getItem("dark-mode-storage") || "light");
+    }
+
+    toggle.addEventListener("click", () => {
+        if (toggle.className === "fas fa-moon") {
+            setTheme("dark");
+        } else if (toggle.className === "fas fa-sun") {
+            setTheme("light");
+        }
+    });
+
+    function setTheme(mode) {
+        localStorage.setItem("dark-mode-storage", mode);
+        if (mode === "dark") {
+            theme.className = "darkTheme";
+            toggle.className = "fas fa-sun";
+        } else if (mode === "light") {
+            theme.className = "lightTheme";
+            toggle.className = "fas fa-moon";
+        }
+    }
+}
\ No newline at end of file
diff --git a/static/svg/email.svg b/static/svg/email.svg
deleted file mode 100644
index 2af169e83..000000000
--- a/static/svg/email.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
\ No newline at end of file
diff --git a/static/svg/facebook.svg b/static/svg/facebook.svg
deleted file mode 100644
index 2570f56a0..000000000
--- a/static/svg/facebook.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
\ No newline at end of file
diff --git a/static/svg/github.svg b/static/svg/github.svg
deleted file mode 100644
index 5426bf4e3..000000000
--- a/static/svg/github.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
\ No newline at end of file
diff --git a/static/svg/gitlab.svg b/static/svg/gitlab.svg
deleted file mode 100644
index 85d54a1ea..000000000
--- a/static/svg/gitlab.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-gitlab"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
\ No newline at end of file
diff --git a/static/svg/instagram.svg b/static/svg/instagram.svg
deleted file mode 100644
index 9fdb8e35d..000000000
--- a/static/svg/instagram.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
\ No newline at end of file
diff --git a/static/svg/linkedin.svg b/static/svg/linkedin.svg
deleted file mode 100644
index 395310945..000000000
--- a/static/svg/linkedin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
\ No newline at end of file
diff --git a/static/svg/twitter.svg b/static/svg/twitter.svg
deleted file mode 100644
index 13c97b98c..000000000
--- a/static/svg/twitter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg>
\ No newline at end of file
diff --git a/static/svg/youtube.svg b/static/svg/youtube.svg
deleted file mode 100644
index c48243850..000000000
--- a/static/svg/youtube.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
\ No newline at end of file