diff --git a/_config.yml b/_config.yml
index 2da1cbb5f9..f65d724dd5 100644
--- a/_config.yml
+++ b/_config.yml
@@ -10,6 +10,9 @@ header_pages:
  - about.md
  - contact.html
 
+ # Set to "dark" for Dark-mode version
+theme_mode: default
+
 # Google services
 google_verification:
 # Use either direct GA implementation or set up GTM account
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 0c85862a6e..83cb10f9f6 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -16,6 +16,8 @@ MIT License http://opensource.org/licenses/MIT
 html, body {
   height: auto;
   min-height: 100%;
+  color: $base-font-color;
+  background-color: $base-bg-color;
 }
 
 img {
diff --git a/_sass/_blockquotes.scss b/_sass/_blockquotes.scss
index e7291ba5fd..8635b93827 100644
--- a/_sass/_blockquotes.scss
+++ b/_sass/_blockquotes.scss
@@ -1,14 +1,14 @@
 blockquote {
-  border-left: 5px solid #7a7a7a;
+  border-left: 5px solid $blockquote-color;
   font-style: italic;
   margin-left: $space-1;
   padding: $space-1;
 }
 
 blockquote footer {
-  background-color: #fff;
+  background-color: $blockquote-bg-color;
   border-color: transparent;
-  color: #7a7a7a;
+  color: $blockquote-color;
   font-size: .85rem;
   font-style: normal;
   text-align: left;
diff --git a/_sass/_code.scss b/_sass/_code.scss
index b7b274b02c..4de6ca16aa 100644
--- a/_sass/_code.scss
+++ b/_sass/_code.scss
@@ -10,7 +10,7 @@ code {
 }
 
 code {
-  color: #7a7a7a;
+  color: $pre-font-color;
 }
 
 pre {
diff --git a/_sass/_dark-mode.scss b/_sass/_dark-mode.scss
new file mode 100644
index 0000000000..24f9cfe3fa
--- /dev/null
+++ b/_sass/_dark-mode.scss
@@ -0,0 +1,61 @@
+/*! Pixyll Dark mode is enabled. */
+
+// Base
+$base-font-color: $light-blue;
+$base-bg-color: $darker-blue;
+
+// Links
+$link-color: $blue;
+$link-hover-color: darken($blue, 40%);
+
+// Borders
+$border-color: $light-blue;
+
+// Blockquotes
+$blockquote-bg-color: $base-bg-color;
+$blockquote-color: $base-font-color;
+
+// Code
+$pre-background-color: $dark-gray;
+$pre-font-color: $light-gray;
+$hljs-comment: $mid-gray;
+$hljs-keyword: $orange; // lighten($dark-blue, 40%);
+$hljs-name: $light-gray; // lighten($dark-gray, 40%);
+$hljs-number: $light-green;
+$hljs-string: $light-pink;
+$hljs-title: $light-gray;
+$hljs-type: light-gray;
+$hljs-tag: $light-gray;
+$hljs-attribute: $light-green;
+$hljs-regexp: $light-pink;
+$hljs-symbol: $purple;
+$hljs-built-in: $orange;
+$hljs-preprocessor: $mid-gray;
+$hljs-deletion: $light-pink;
+$hljs-addition: $light-green;
+$hljs-change: $light-gray;
+$hljs-chunk: $dark-blue;
+
+// Header
+$header-border-top: thin solid $light-gray;
+$header-color: $light-blue;
+
+// Nav
+$nav-color: $light-blue;
+$nav-link-color: $light-blue;
+$nav-link-border-bottom: 2px solid $light-blue;
+$nav-active-border-bottom: 1px solid $blue;
+
+// Footer
+$footer-color: $base-font-color;
+$footer-bg-color: $base-bg-color;
+
+// Posts
+$post-link-color: $blue;
+$post-meta-color: $light-blue;
+
+// Pagination
+$pagination-link-color: $light-blue;
+$pagination-link-hover-color: lighten($light-blue, 40%);
+$pagination-background-color: $darker-blue;
+$pagination-hover-background-color: lighten($darker-blue, 40%);
diff --git a/_sass/_links.scss b/_sass/_links.scss
index 9c50696b73..dd9a4b6e75 100644
--- a/_sass/_links.scss
+++ b/_sass/_links.scss
@@ -6,7 +6,7 @@ a {
     rgba($link-color,.8) 18%,
     rgba(0,0,0,0) 17%
   );
-  text-shadow: white 1px 0px 0px, white -1px 0px 0px;
+  text-shadow: $base-bg-color 1px 0px 0px, $base-bg-color -1px 0px 0px;
 }
 
 a:hover,
@@ -21,7 +21,7 @@ a:active {
     rgba($link-hover-color,.8) 17%,
     rgba(0,0,0,0) 17%
   );
-  text-shadow: white 1px 0px 0px, white -1px 0px 0px;
+  text-shadow: $base-bg-color 1px 0px 0px, $base-bg-color -1px 0px 0px;
 }
 
 // Correct issues with buttons
@@ -34,7 +34,7 @@ button,
 .button:hover,
 .button:focus,
 .button:active {
-  color: white;
+  color: $base-bg-color;
   text-shadow: none;
   background-image: none;
 }
diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss
index 1919713c8e..cbf0d6abca 100644
--- a/_sass/_pagination.scss
+++ b/_sass/_pagination.scss
@@ -9,10 +9,10 @@
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
-  background: #fafafa;
+  background: $pagination-background-color;
   border-radius: 0.1875em;
   border: 1px solid #f3f3f3;
-  color: #333333;
+  color: $pagination-link-color;
   padding: 1em 1.5em;
 }
 
@@ -25,8 +25,8 @@
 }
 
 .pagination a:hover, .pagination a:focus {
-  background: white;
-  color: #477dca;
+  background: $pagination-hover-background-color;
+  color: $pagination-link-hover-color;
 }
 
 .pagination a:active {
diff --git a/_sass/_posts.scss b/_sass/_posts.scss
index 91f5a06d27..cffcba698d 100644
--- a/_sass/_posts.scss
+++ b/_sass/_posts.scss
@@ -17,7 +17,7 @@
 .post-link .post-title {
   margin-top: 0;
   font-weight: 600;
-  color: #333;
+  color: $post-link-color;
 }
 
 .post-footer {
@@ -39,7 +39,7 @@
   font-weight: 300;
   margin: 0;
   padding: .25em 0;
-  color: #7a7a7a;
+  color: $post-meta-color;
   font-style: italic;
 }
 
diff --git a/_sass/_tables.scss b/_sass/_tables.scss
index d8a7d37e32..bc20317398 100644
--- a/_sass/_tables.scss
+++ b/_sass/_tables.scss
@@ -20,14 +20,14 @@ table {
         padding: 12px;
         line-height: 1.2;
         vertical-align: top;
-        border-top: 1px solid #333;
+        border-top: 1px solid $border-color;
       }
     }
   }
   // Bottom align for column headings
   > thead > tr > th {
     vertical-align: bottom;
-    border-bottom: 2px solid #333;
+    border-bottom: 2px solid $border-color;
   }
   // Remove top border from thead by default
   > caption + thead,
@@ -42,6 +42,6 @@ table {
   }
   // Account for multiple tbody instances
   > tbody + tbody {
-    border-top: 2px solid #333;
+    border-top: 2px solid $border-color;
   }
 }
diff --git a/_sass/_typography.scss b/_sass/_typography.scss
index 9dce6d8696..9747684f75 100644
--- a/_sass/_typography.scss
+++ b/_sass/_typography.scss
@@ -8,7 +8,7 @@ abbr {
 }
 
 p {
-  color: #333;
+  color: $base-font-color;
   line-height: 1.5;
 }
 
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index f5a86795c8..7ad7331804 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -1,3 +1,5 @@
+/*! Default values. */
+
 // Typography
 $base-font-size: 14px !default;
 $bold-font-weight: bold !default;
@@ -39,6 +41,9 @@ $yellow: #efcc00 !default;
 $orange: #ffcc22 !default;
 $purple: #f92080 !default;
 $dark-blue: #00369f !default;
+$darker-blue: #24292e !default;
+$light-blue: #add8e6 !default;;
+$lighter-blue: #c8e1ff !default;;
 $green: #00ab37 !default;
 $dark-green: #009f06 !default;
 $light-pink: #ffdddd !default;
@@ -51,6 +56,8 @@ $darken-1: rgba(#000,.0625) !default;
 $darken-2: rgba(#000,.125) !default;
 $darken-3: rgba(#000,.25) !default;
 $darken-4: rgba(#000,.5) !default;
+$base-font-color: $dark-gray;
+$base-bg-color: white;
 
 // Links
 $link-color: $blue;
@@ -85,6 +92,10 @@ $border-color: $light-gray !default;
 $border-width: 1px !default;
 $border-radius: 3px !default;
 
+// Blockquotes
+$blockquote-bg-color: #fff;
+$blockquote-color: #7a7a7a;
+
 // Forms
 $form-field-font-size: 1rem;
 $form-field-height: 2.25rem;
@@ -94,7 +105,8 @@ $form-field-padding-x: .5rem;
 // Code
 $pre-border-radius: 0;
 $pre-background-color: #fafafa;
-$hljs-comment: $mid-gray;
+$pre-font-color: $mid-gray;
+$hljs-comment: $light-gray;
 $hljs-keyword: $dark-blue;
 $hljs-name: $dark-gray;
 $hljs-number: $dark-green;
@@ -133,3 +145,13 @@ $footer-color: #7a7a7a;
 $footer-bg-color: #fafafa;
 $footer-font-weight: 300;
 $footer-font-size: .75rem;
+
+// Posts
+$post-link-color: $dark-gray;
+$post-meta-color: $mid-gray;
+
+// Pagination
+$pagination-link-color: $nav-link-color;
+$pagination-link-hover-color: darken($nav-link-color, 40%);
+$pagination-background-color: #fafafa;
+$pagination-hover-background-color: white;
diff --git a/_sass/basscss/_color-base.scss b/_sass/basscss/_color-base.scss
index 486b02edbc..10462a951d 100644
--- a/_sass/basscss/_color-base.scss
+++ b/_sass/basscss/_color-base.scss
@@ -1,8 +1,8 @@
 /* Basscss Color Base */
 
 body {
-  color: $dark-gray;
-  background-color: white;
+  color: $base-font-color;
+  background-color: $base-bg-color;
 }
 
 a {
@@ -16,7 +16,7 @@ a:hover {
 
 pre,
 code {
-  background-color: $lighter-gray;
+  background-color: $pre-background-color;
   border-radius: $border-radius;
 }
 
diff --git a/css/pixyll.scss b/css/pixyll.scss
index 5aba07d2c5..f317efb311 100644
--- a/css/pixyll.scss
+++ b/css/pixyll.scss
@@ -13,6 +13,10 @@
 
 @import 'variables';
 
+{% if site.theme_mode == "dark" %}
+@import 'dark-mode';
+{% endif %}
+
 @import 'basscss';
 
 @import 'base';