diff --git a/.stylelintrc.json b/.stylelintrc.json
index 139033f638da34caa21e2c6c3572c6423b9f6bc2..108fc517f8cba7c23c5661e4d13d262cc224cd9d 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,6 +1,7 @@
 {
   "ignoreFiles" : [
     "assets/css/just-the-docs.scss",
+    "assets/css/dark-mode-preview.scss",
     "_sass/vendor/**/*.scss"
   ],
   "extends": [
diff --git a/.travis.yml b/.travis.yml
index c7ec1c37896067875ee3382750a19974b4da6c18..f9fa81d0278cdca47fc5339540aeb8f3c6c493b7 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,6 +6,7 @@ env:
 
 install:
   - npm install
+  - gem install bundler --version '>=1.17.1'
   - bundle install
 
 script:
diff --git a/_config.yml b/_config.yml
index 22aef3f2a2b3976a33067589eb55e87472407c3a..9b02ede062746ba7e27d56a6a13ff6ef812bf88b 100644
--- a/_config.yml
+++ b/_config.yml
@@ -28,3 +28,6 @@ search_enabled: true
 aux_links:
   "Just the Docs on GitHub":
     - "//github.com/pmarsceill/just-the-docs"
+
+# Color scheme currently only supports "dark" or nil (default)
+color_scheme: nil
diff --git a/_layouts/default.html b/_layouts/default.html
index cc7678631dbaf3c5c8160fb4ab1e4809f661849e..016725a17920d93387a1c3974e851c711ee87934 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -5,7 +5,7 @@
 
   <div class="page-wrap">
     <div class="side-bar">
-      <a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 text-grey-dk-300 lh-tight">{{ site.title }}</a>
+      <a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 lh-tight">{{ site.title }}</a>
       <span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
       <div class="navigation main-nav js-main-nav">
         {% include nav.html %}
diff --git a/_sass/base.scss b/_sass/base.scss
index 7f417f3067f794dcdbc619ed2b47242d1645c99a..1ea39036ee6f137a0537fb492c3405601a653121 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -7,6 +7,11 @@
   box-sizing: border-box;
 }
 
+::selection {
+  color: $white;
+  background: $link-color;
+}
+
 html {
   @include fs-4;
 }
@@ -16,6 +21,7 @@ body {
   font-size: inherit;
   line-height: $body-line-height;
   color: $body-text-color;
+  background-color: $body-background-color;
 }
 
 p,
@@ -64,7 +70,7 @@ a {
 
 a:not([class]) {
   text-decoration: none;
-  background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%);
+  background-image: linear-gradient($border-color 0%, $border-color 100%);
   background-repeat: repeat-x;
   background-position: 0 100%;
   background-size: 1px 1px;
@@ -99,6 +105,6 @@ hr {
   height: 1px;
   padding: 0;
   margin: $sp-6 0;
-  background-color: $grey-lt-100;
+  background-color: $border-color;
   border: 0;
 }
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
index a58c92026656e10875ca1e1517ddf26d2c302b63..05db0ed9015e1a1142d211b6464f95d812fe7d68 100644
--- a/_sass/buttons.scss
+++ b/_sass/buttons.scss
@@ -15,11 +15,11 @@
   font-size: inherit;
   font-weight: 500;
   line-height: 1.5;
-  color: $purple-200;
+  color: $link-color;
   text-decoration: none;
   vertical-align: baseline;
   cursor: pointer;
-  background-color: #f7f7f7;
+  background-color: $base-button-color;
   border-width: 0;
   border-radius: 3px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
@@ -38,7 +38,7 @@
 
   &:hover,
   &.zeroclipboard-is-hover {
-    color: $purple-300;
+    color: darken($link-color, 2%);
   }
 
   &:hover,
@@ -46,13 +46,13 @@
   &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
     text-decoration: none;
-    background-color: #f4f4f4;
+    background-color: darken($base-button-color, 1%);
   }
 
   &:active,
   &.selected,
   &.zeroclipboard-is-active {
-    background-color: #ededed;
+    background-color: darken($base-button-color, 3%);
     background-image: none;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
   }
@@ -75,7 +75,7 @@
 }
 
 .btn-outline {
-  color: $blue-100;
+  color: $link-color;
   background: transparent;
   box-shadow: inset 0 0 0 2px $grey-lt-300;
 
@@ -83,7 +83,7 @@
   &:active,
   &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
-    color: $grey-dk-100;
+    color: darken($link-color, 4%);
     text-decoration: none;
     background-color: transparent;
     box-shadow: inset 0 0 0 3px $grey-lt-300;
@@ -101,6 +101,10 @@
   }
 }
 
+.btn-primary {
+  @include btn-color($white, $btn-primary-color);
+}
+
 .btn-purple {
   @include btn-color($white, $purple-100);
 }
diff --git a/_sass/code.scss b/_sass/code.scss
index 3e740ed8dbd0b32a2458eaa1dc3457fbfc99d284..f29a97c105f370618b21d1abeeb125fc3857c047 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -6,7 +6,7 @@
 code {
   padding: 0.2em 0.15em;
   font-weight: 400;
-  background-color: $grey-lt-000;
+  background-color: $code-background-color;
   border: $border $border-color;
   border-radius: $border-radius;
 }
@@ -14,7 +14,7 @@ code {
 pre.highlight {
   padding: $sp-3;
   margin-bottom: 0;
-  background-color: $grey-lt-000;
+  background-color: $code-background-color;
 
   code {
     padding: 0;
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6c2e8a9caabfbfa35c6101b769c24ace2d23e7f4
--- /dev/null
+++ b/_sass/color_schemes/dark.scss
@@ -0,0 +1,14 @@
+
+$body-background-color: $grey-dk-300;
+$sidebar-color: $grey-dk-300;
+$border-color: $grey-dk-200;
+
+$body-text-color: $grey-lt-300;
+$body-heading-color: $grey-lt-000;
+$nav-child-link-color: $grey-dk-000;
+
+$link-color: $blue-000;
+$btn-primary-color: $blue-200;
+$base-button-color: $grey-dk-250;
+
+$code-background-color: $grey-dk-250;
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index 51399f21c5d2d72462609f15ec7e76e27ffa4eb3..82064a55700a2194eabb21c1357a191535a17950 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -17,6 +17,7 @@
 // $grey-dk-000: #959396;
 // $grey-dk-100: #5c5962;
 // $grey-dk-200: #44434d;
+// $grey-dk-250: #302d36 !default;
 // $grey-dk-300: #27262b;
 //
 // $grey-lt-000: #f5f6fa;
@@ -39,9 +40,16 @@
 // $green-200: #009c7b;
 // $green-300: #026e57;
 //
-// $body-text-color: $grey-dk-100;
-// $body-heading-color: $grey-dk-300;
-// $link-color: $purple-000;
+// $body-background-color: $white !default;
+// $sidebar-color: $grey-lt-000 !default;
+// $code-background-color: $grey-lt-000 !default;
+
+// $body-text-color: $grey-dk-100 !default;
+// $body-heading-color: $grey-dk-300 !default;
+// $nav-child-link-color: $grey-dk-100 !default;
+// $link-color: $purple-000 !default;
+// $btn-primary-color: $purple-100 !default;
+// $base-button-color: #f7f7f7 !default;
 //
 // //
 // // Media queries in pixels
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 35b9631b0e897244058c7961e19f5368b1d26431..27f15e9ae8003b1ee58ad63cfe1718532c7b3a6b 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -21,7 +21,7 @@
   flex-wrap: wrap;
   padding-top: $gutter-spacing-sm;
   padding-bottom: $gutter-spacing-sm;
-  background-color: $grey-lt-000;
+  background-color: $sidebar-color;
 
   @include mq(md) {
     flex-wrap: nowrap;
@@ -75,10 +75,10 @@
 }
 
 .page-header {
-  background-color: $grey-lt-000;
+  background-color: $sidebar-color;
 
   @include mq(md) {
-    background-color: $white;
+    background-color: $body-background-color;
   }
 
   .main-content {
@@ -138,6 +138,6 @@ body {
     position: static;
     align-self: flex-end;
     justify-self: end;
-    background-color: $grey-lt-000;
+    background-color: $sidebar-color;
   }
 }
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index e5d580b02ac7553e32e3128047520926e27ce9e9..0a5fb7d3aa5f88be4959d2956cfa98a4b8266c5e 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -5,7 +5,8 @@
 .site-title {
   display: block;
   flex: 1 1 auto;
-  background-color: $grey-lt-000;
+  color: $body-heading-color;
+  background-color: $sidebar-color;
 
   @include mq(md) {
     position: absolute;
@@ -34,7 +35,7 @@
   list-style: none;
 
   .navigation-list-link {
-    color: $grey-dk-100;
+    color: $nav-child-link-color;
   }
 
   .navigation-list-item {
@@ -44,13 +45,13 @@
       position: absolute;
       margin-top: 0.3em;
       margin-left: -0.8em;
-      color: $grey-dk-000;
+      color: rgba($body-text-color, 0.3);
       content: "- ";
     }
 
     &.active {
       &::before {
-        color: $grey-dk-100;
+        color: $body-text-color;
       }
     }
   }
@@ -72,7 +73,7 @@
 
   &.active {
     font-weight: 600;
-    color: $grey-dk-200;
+    color: $body-heading-color;
     text-decoration: none;
   }
 }
diff --git a/_sass/search.scss b/_sass/search.scss
index 7e3a80267faf0f8ce967f996e860f22d88651620..32ec1dbe225ecc5f1ca4f09fe3eb3522ccb9bfb7 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -39,20 +39,21 @@
     display: block;
     width: 300px;
     margin-top: $gutter-spacing;
-    background: $white;
+    background: lighten($body-background-color, 1%);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
   }
 }
 
 .search-input-wrap {
   display: flex;
-  background-color: $white;
+  background-color: $body-background-color;
 }
 
 .search-input {
   width: 100%;
   padding-top: $sp-1;
   padding-bottom: $sp-1;
+  background-color: $body-background-color;
   border-top: 0;
   border-right: 0;
   border-bottom: 0;
@@ -64,7 +65,7 @@
     box-shadow: none;
 
     + .search-icon {
-      fill: $purple-000;
+      fill: $link-color;
     }
   }
 
@@ -107,6 +108,7 @@
   padding-left: $sp-3;
 
   &:hover {
-    background-color: $grey-lt-000;
+    color: $body-heading-color;
+    background-color: darken($body-background-color, 2%);
   }
 }
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 59cb59e83ad74096623ff6155294ce58b9ad4b6c..8a09eda365c8675d38387928e96a0852e70be8bc 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -17,6 +17,7 @@ $white: #fff !default;
 $grey-dk-000: #959396 !default;
 $grey-dk-100: #5c5962 !default;
 $grey-dk-200: #44434d !default;
+$grey-dk-250: #302d36 !default;
 $grey-dk-300: #27262b !default;
 
 $grey-lt-000: #f5f6fa !default;
@@ -49,9 +50,16 @@ $red-100: #f96e65 !default;
 $red-200: #e94c4c !default;
 $red-300: #dd2e2e !default;
 
+$body-background-color: $white !default;
+$sidebar-color: $grey-lt-000 !default;
+$code-background-color: $grey-lt-000 !default;
+
 $body-text-color: $grey-dk-100 !default;
 $body-heading-color: $grey-dk-300 !default;
+$nav-child-link-color: $grey-dk-100 !default;
 $link-color: $purple-000 !default;
+$btn-primary-color: $purple-100 !default;
+$base-button-color: #f7f7f7 !default;
 
 //
 // Media queries in pixels
diff --git a/_sass/tables.scss b/_sass/tables.scss
index d97ed0779e499e3b78a55e537d3db92c65d1c8f7..39bc0dc38e9dcd5a30b1f0969db3537fd34b8a16 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -25,7 +25,8 @@ td {
   padding-right: $sp-3;
   padding-bottom: $sp-2;
   padding-left: $sp-3;
-  border-bottom: $border $grey-lt-000;
+  background-color: lighten($body-background-color, 2%);
+  border-bottom: $border rgba($border-color, 0.5);
   border-left: $border $border-color;
 
   &:first-of-type {
diff --git a/_sass/utilities/_colors.scss b/_sass/utilities/_colors.scss
index 011f4c1df36a9ec180849017b0f08fff6e8a2944..f3607ab8959b0c8a25a48dfdc6561247ba5cf26b 100644
--- a/_sass/utilities/_colors.scss
+++ b/_sass/utilities/_colors.scss
@@ -16,6 +16,10 @@
   color: $grey-dk-200 !important;
 }
 
+.text-grey-dk-250 {
+  color: $grey-dk-250 !important;
+}
+
 .text-grey-dk-300 {
   color: $grey-dk-300 !important;
 }
@@ -130,6 +134,10 @@
   background-color: $grey-dk-200 !important;
 }
 
+.bg-grey-dk-250 {
+  background-color: $grey-dk-250 !important;
+}
+
 .bg-grey-dk-300 {
   background-color: $grey-dk-300 !important;
 }
diff --git a/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f30f9e0cdc930e9cb2df4f3bcae7dcbc5a8c8d0d
--- /dev/null
+++ b/assets/css/dark-mode-preview.scss
@@ -0,0 +1,41 @@
+---
+# this ensures Jekyll reads the file to be transformed into CSS later
+# only Main files contain this front matter, not partials.
+---
+
+//
+// Import external dependencies
+//
+
+@import "./vendor/normalize.scss/normalize.scss";
+
+//
+// Import Just the docs scss
+//
+
+// Support
+@import "./support/support";
+
+//
+// Import custom color scheme scss
+//
+
+@import "./color_schemes/dark.scss";
+
+// Modules
+@import "./base";
+@import "./layout";
+@import "./content";
+@import "./navigation";
+@import "./typography";
+@import "./labels";
+@import "./buttons";
+@import "./search";
+@import "./tables";
+@import "./code";
+@import "./utilities/utilities";
+
+//
+// Import custom overrides
+//
+@import "./custom/custom";
diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss
index f47d6a8696e3169c95a8c2779f63c3cec40d8601..601cdaa61450c4a7f4763824c3122b18ca8dd4d8 100644
--- a/assets/css/just-the-docs.scss
+++ b/assets/css/just-the-docs.scss
@@ -4,7 +4,7 @@
 ---
 
 //
-// Import dependancies
+// Import external dependencies
 //
 
 @import "./vendor/normalize.scss/normalize.scss";
@@ -16,8 +16,13 @@
 // Support
 @import "./support/support";
 
-// Custom overrides
-@import "./custom/custom";
+//
+// Import custom color scheme scss
+//
+
+{% if site.color_scheme == "dark" %}
+@import "./color_schemes/dark.scss";
+{% endif %}
 
 // Modules
 @import "./base";
@@ -31,3 +36,8 @@
 @import "./tables";
 @import "./code";
 @import "./utilities/utilities";
+
+//
+// Import custom overrides
+//
+@import "./custom/custom";
diff --git a/docs/configuration.md b/docs/configuration.md
index e0924186ba33a33c02927cbb0a304c6135de2f16..94610ff7cd7d60084f81be4779acae3ab0d3f3b1 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -23,3 +23,28 @@ aux_links:
 "Just the Docs on GitHub":
     - "//github.com/pmarsceill/just-the-docs"
 ```
+
+## Color scheme
+
+```yml
+# Color scheme currently only supports "dark" or nil (default)
+color_scheme: "dark"
+```
+<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
+
+<script>
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
+const cssFile = document.querySelector('[rel="stylesheet"]')
+const originalCssRef = cssFile.getAttribute('href')
+const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
+
+addEvent(toggleDarkMode, 'click', function(){
+if (cssFile.getAttribute('href') === originalCssRef) {
+cssFile.setAttribute('href', darkModeCssRef)
+} else {
+cssFile.setAttribute('href', originalCssRef)
+}
+})
+</script>
+
+See [Customization]({{site.baseurl }}{% link docs/customization.md %}) for more information.
diff --git a/docs/customization.md b/docs/customization.md
index b5a4f83ce17918c9780c6b825e1d251a6e436b91..6f0961b64770c4e3040dc23deff4456bac92ccd6 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -15,11 +15,49 @@ nav_order: 6
 
 ---
 
-## Visual customization
+## Color schemes
+{: .d-inline-block :}
+
+New
+{: .label .label-green :}
+
+Just the Docs supports two color schemes: light (default), and dark.
+
+To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file:
+
+#### Example
+{: no_toc }
+
+```yml
+# Color scheme currently only supports "dark" or nil (default)
+color_scheme: "dark"
+```
+<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
+
+<script>
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
+const cssFile = document.querySelector('[rel="stylesheet"]')
+const originalCssRef = cssFile.getAttribute('href')
+const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
+
+addEvent(toggleDarkMode, 'click', function(){
+  if (cssFile.getAttribute('href') === originalCssRef) {
+    cssFile.setAttribute('href', darkModeCssRef)
+  } else {
+    cssFile.setAttribute('href', originalCssRef)
+  }
+})
+</script>
+
+
+## Specific visual customization
 
 To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc.. are derived from these variables. To override a specific variable, uncomment out it’s line and change it’s value.
 
-For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the link color variable on line `44`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing.
+For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing.
+
+#### Example
+{: no_toc }
 
 ```scss
 // ...
@@ -35,10 +73,3 @@ _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not
 
 ---
 
-## Themes
-{: .d-inline-block :}
-
-Coming soon
-{: .label .label-yellow :}
-
-Hard at work on a dark theme, and more.
diff --git a/docs/utilities/color.md b/docs/utilities/color.md
index f2bfc53d392923bc157e293a79802b293629aefd..f025f9116b6bf573b3be076a4f2df4b030ce48cb 100644
--- a/docs/utilities/color.md
+++ b/docs/utilities/color.md
@@ -34,6 +34,7 @@ All the colors used in Just the Docs have been systemsized into a series of vari
 | <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-000"></span> `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` |
 | <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-100"></span> `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` |
 | <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-200"></span> `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` |
+| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-250"></span> `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` |
 | <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-300"></span> `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` |
 
 ## Purples
diff --git a/index.md b/index.md
index 3ad9ca67cd5f2f1ae8a8339429870433e5e6a385..e960388095f5fb0c89ed4c2d4b2d6eec2323f756 100644
--- a/index.md
+++ b/index.md
@@ -12,7 +12,7 @@ permalink: /
 Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
 {: .fs-6 .fw-300 }
 
-[Get started now](#getting-started){: .btn .btn-purple .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 }
+[Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 }
 
 ---
 
diff --git a/just-the-docs.gemspec b/just-the-docs.gemspec
index b0925867ad7a35f727b2eabdd65674772d8ebaa6..3d99264779d4ac5d2813a6ccf46dc885f2aa14ef 100644
--- a/just-the-docs.gemspec
+++ b/just-the-docs.gemspec
@@ -13,8 +13,8 @@ Gem::Specification.new do |spec|
   spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|bin|_layouts|_includes|lib|Rakefile|_sass|LICENSE|README)}i) }
   spec.executables   << 'just-the-docs'
 
-  spec.add_runtime_dependency "jekyll", "~> 3.3"
-  spec.add_runtime_dependency "rake", "~> 10.0"
+  spec.add_runtime_dependency "jekyll", "~> 3.8.5"
+  spec.add_runtime_dependency "rake", "~> 12.3.1"
 
-  spec.add_development_dependency "bundler", "~> 1.12"
+  spec.add_development_dependency "bundler", "~> 1.17.1"
 end