diff --git a/_config.yml b/_config.yml
index 6ce2ed369210dc76e5d852e445fc8455be8e96c8..f9b5dc5ede8aee912a61ff737dfc222017fd988b 100644
--- a/_config.yml
+++ b/_config.yml
@@ -30,3 +30,5 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac
 aux_links:
   "Just the Docs on GitHub":
     - "//github.com/pmarsceill/just-the-docs"
+
+color_scheme: "dark"
diff --git a/_sass/base.scss b/_sass/base.scss
index 6fdf05869e596f2f88c34d744c8da35d761c40ef..e787f01d9fd15286d6f6cc30ea8204287f66fcae 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -16,6 +16,7 @@ body {
   font-size: inherit;
   line-height: $body-line-height;
   color: $body-text-color;
+  background-color: $body-background-color;
 }
 
 p,
@@ -64,7 +65,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 +100,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..7fcb21097e43b7d1c44117e31c6bcff7735dc1e1 100644
--- a/_sass/buttons.scss
+++ b/_sass/buttons.scss
@@ -75,7 +75,7 @@
 }
 
 .btn-outline {
-  color: $blue-100;
+  color: $link-color;
   background: transparent;
   box-shadow: inset 0 0 0 2px $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 7d2b68a2a0ef021b1701748909363cae9e852f2e..19a2a39780e1d727a987080e00372003cf201796 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 {
 .highlight {
   padding: $sp-3;
   margin-bottom: 0;
-  background-color: $grey-lt-000;
+  background-color: $code-background-color;
 
   code {
     padding: 0;
diff --git a/_sass/layout.scss b/_sass/layout.scss
index e3c93e480b562f568863fb249e41393d7d91338a..12fef6faa845cae12274537ee6379e1c81e59d8c 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;
     border-bottom: $border $border-color;
 
   }
@@ -137,6 +137,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 802a6edbb51c1f61a3500494eb98b0d36f1e13bb..8a0bf49c1dd027ab9081ee452133e7c5c917305a 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,21 +35,23 @@
   list-style: none;
 
   .navigation-list-link {
-    color: $grey-dk-100;
+    color: $nav-child-link-color;
   }
 
   .navigation-list-item {
+    position: relative;
+
     &::before {
       position: absolute;
       margin-top: 0.3em;
       margin-left: -0.8em;
-      color: $grey-dk-000;
+      color: $border-color;
       content: "- ";
     }
 
     &.active {
       &::before {
-        color: $grey-dk-100;
+        color: $body-text-color;
       }
     }
   }
@@ -70,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 7037080661b29ecb2b12377dd9f639e4fbd58fcc..c847af5b04fe74fb9e923dbe0ee2c24125d16916 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -46,13 +46,14 @@
 
 .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;
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 59cb59e83ad74096623ff6155294ce58b9ad4b6c..ce25353c8c8588a4232bdc42339e1c2d704dcd61 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,15 @@ $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;
 
 //
 // Media queries in pixels
diff --git a/_sass/tables.scss b/_sass/tables.scss
index 5728c88419ddbc6d691d6ba54c98ae15d391b7e2..37172b2c3120f5a7dd6c715682b05287fce88924 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -21,11 +21,12 @@ th,
 td {
   @include fs-3;
   min-width: 120px;
+  background-color: lighten($body-background-color, 1%);
   padding-top: $sp-2;
   padding-right: $sp-3;
   padding-bottom: $sp-2;
   padding-left: $sp-3;
-  border-bottom: $border $grey-lt-000;
+  border-bottom: $border rgba($border-color, 0.5);
   border-left: $border $border-color;
 
   &:first-of-type {
diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss
index f730643044db36eff3674450394e207a85d13c65..18d948cf651957c7ed55610e2bca238306b47394 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 "./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/index.md b/index.md
index 66c833903fdea3fdf8a9be21b7361d15a40f8600..b467f5d1f3332b6b04156bc74451b620300fe1ba 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 }
 
 ---