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/_includes/nav.html b/_includes/nav.html
index dba0deab4ac9038674af42825f1a75d39baddfb9..4ebd91f3f362e3ac442b3047535f6852fabdad1e 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,24 +1,44 @@
 <nav>
   <ul class="navigation-list">
-  {% assign pages_list = site.html_pages | sort:"nav_order" %}
-  {% for node in pages_list %}
-      <li class="navigation-list-item{% if page.url == node.url %} active{% endif %} js-side-nav-item">
-        {% if node.parent == nil or node.has_children == true %}
-        <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url or (page.parent != nil and page.parent == node.parent) %} active{% endif %}">{{ node.title }}</a>
-          {% if (node.has_children == true and node.parent == page.parent) %}
-            {% assign children_list = site.html_pages | sort:"nav_order" %}
-            <ul class="navigation-list-child-list">
-              {% for child in children_list %}
-                {% if child.parent == node.parent and child.title != node.title %}
-                <li class="navigation-list-item {% if page.url == child.url %} active{% endif %}">
-                  <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
-                </li>
-                {% endif %}
-              {% endfor %}
-            </ul>
-          {% endif %}
+    {% assign pages_list = site.html_pages | sort:"nav_order" %}
+    {% for node in pages_list %}
+      {% unless node.nav_exclude %}
+        {% if node.parent == nil %}
+          <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
+            {% if page.parent == node.title or page.grand_parent == node.title %}
+              {% assign first_level_url = node.url | absolute_url %}
+            {% endif %}
+            <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
+            {% if node.has_children %}
+              {% assign children_list = site.html_pages | sort:"nav_order" %}
+              <ul class="navigation-list-child-list ">
+                {% for child in children_list %}
+                  {% if child.parent == node.title %}
+                    <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
+                      {% if page.url == child.url or page.parent == child.title %}
+                        {% assign second_level_url = child.url | absolute_url %}
+                      {% endif %}
+                      <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
+                      {% if child.has_children %}
+                        {% assign grand_children_list = site.html_pages | sort:"nav_order" %}
+                        <ul class="navigation-list-child-list">
+                          {% for grand_child in grand_children_list %}
+                            {% if grand_child.parent == child.title %}
+                              <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
+                                <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
+                              </li>
+                            {% endif %}
+                          {% endfor %}
+                        </ul>
+                      {% endif %}
+                    </li>
+                  {% endif %}
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </li>
         {% endif %}
-      </li>
-  {% endfor %}
+      {% endunless %}
+    {% endfor %}
   </ul>
 </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
index cc7678631dbaf3c5c8160fb4ab1e4809f661849e..d6e610596f560c0e9bc3f1b6342341e98d72d683 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 %}
@@ -37,10 +37,15 @@
       </div>
       <div class="main-content">
         {% unless page.url == "/" %}
-          {% if page.parent != nil and page.parent != page.title %}
+          {% if page.parent %}
             <nav class="breadcrumb-nav">
               <ol class="breadcrumb-nav-list">
-                <li class="breadcrumb-nav-list-item"><a href="{{ site.url }}{{ site.baseurl }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
+                {% if page.grand_parent %}
+                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
+                  <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
+                {% else %}
+                  <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+                {% endif %}
                 <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
               </ol>
             </nav>
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 0f08daa0962c5c565cbd4c0cb5bc07cc733a50f2..f29a97c105f370618b21d1abeeb125fc3857c047 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -6,15 +6,15 @@
 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;
 }
 
-.highlight {
+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/content.scss b/_sass/content.scss
index 1dd5256593b8fbf2cb13aa29c8556f542a6bf9ce..46fc2948ebcc157efe03cf2a9cfe60c27e37f7a4 100644
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -4,6 +4,12 @@
 // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
 
 .page-content {
+  a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   ul,
   ol {
     padding-left: 1.5em;
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..364c569a1cbb931eb96346abf095eb200a5d0a76 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;
       }
     }
   }
@@ -63,6 +64,16 @@
   @include mq(md) {
     @include fs-3;
   }
+
+  .navigation-list-child-list {
+    display: none;
+  }
+
+  &.active {
+    .navigation-list-child-list {
+      display: block;
+    }
+  }
 }
 
 .navigation-list-link {
@@ -72,7 +83,7 @@
 
   &.active {
     font-weight: 600;
-    color: $grey-dk-200;
+    color: $body-heading-color;
     text-decoration: none;
   }
 }
@@ -101,6 +112,11 @@
 }
 
 // Breadcrumb nav
+.breadcrumb-nav {
+  @include mq(md) {
+    margin-top: -$sp-4;
+  }
+}
 
 .breadcrumb-nav-list {
   padding-left: 0;
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 c2f867b66abd680292c6d5f2405c28c088d013ec..94610ff7cd7d60084f81be4779acae3ab0d3f3b1 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -6,7 +6,7 @@ nav_order: 2
 
 # Configuration
 
-Just the Docs has some specific configuration parameters that can be definied in your Jekyll site's `config.yml` file.
+Just the Docs has some specific configuration parameters that can be definied in your Jekyll site's `_config.yml` file.
 
 ## Search enabled
 
@@ -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/navigation-structure.md b/docs/navigation-structure.md
index 81143214c513af7cccb0483e34d6f9e1a0a7c49a..cd9de43867834393438259978003b6e90bbe662b 100644
--- a/docs/navigation-structure.md
+++ b/docs/navigation-structure.md
@@ -17,16 +17,18 @@ nav_order: 5
 
 ## Main navigation
 
-The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (parent pages with children).
+The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (pages with children and grandchildren).
 
-### Top level pages
+By default, all pages will appear as top level pages in the main nav unless a parent page is defined (see [Pages with Children](#pages-with-children)).
 
-By default, all pages will appear as top level pages in the main nav.
+---
 
-### Ordering pages
+## Ordering pages
 
 To specify a page order, use the `nav_order` variable in your pages' YAML front matter.
 
+#### Example
+{: .no_toc }
 ```yaml
 ---
 layout: default
@@ -35,9 +37,27 @@ nav_order: 4
 ---
 ```
 
-### Pages with children
+---
+
+## Excluding pages
+
+For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page. Use the `nav_exclude: true` parameter in the YAML front matter for that page.
+
+#### Example
+{: .no_toc }
+```yaml
+---
+layout: default
+title: 404
+nav_exclude: true
+---
+```
+
+---
+
+## Pages with children
 
-Sometimes you will want to create a page with many children (a section). To accomplish this you need to a few things. First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like:
+Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like:
 
 ```
 +-- ..
@@ -53,7 +73,7 @@ Sometimes you will want to create a page with many children (a section). To acco
 |   |   +-- typography.md
 |   |
 |   |-- utilities
-|   |   |-- utilities.md (parent page)
+|   |   |-- utilities.md      (parent page)
 |   |   |-- color.md
 |   |   |-- layout.md
 |   |   |-- responsive-modifiers.md
@@ -66,45 +86,105 @@ Sometimes you will want to create a page with many children (a section). To acco
 +-- ..
 ```
 
-On the parent pages, add 3 YAML front matter variables:
+On the parent pages, add 2 YAML front matter variables:
 -  `has_children: true` (tells us that this a parent page)
--  `parent: ` set this to the title of the parent page (in this case, it's this page's title)
--  `permalink: ` set this to the directory that the contains the pages
+-  `permalink:` set this to the site directories that the contains the pages
 
 #### Example
 {: .no_toc }
 
 ```yaml
+---
 layout: default
 title: UI Components
 nav_order: 2
 has_children: true
-parent: UI Components
-permalink: /ui-components
+permalink: /docs/ui-components
+---
 ```
 
-Here we're setting up the UI Components landing page that is available at `/ui-components`, has children and is ordered second in the main nav.
+Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, it has children and is ordered second in the main nav.
 
 ### Child pages
+{: .text-gamma }
 
 On child pages, simply set the `parent:` YAML front matter to whatever the parent's page title is and set a nav order (this number is now scoped within the section).
 
 #### Example
 {: .no_toc }
 ```yaml
+---
 layout: default
 title: Buttons
 parent: UI Components
 nav_order: 2
+---
 ```
 
 The Buttons page appears a child of UI Components and appears second in the UI Components section.
 
+### Children with children
+{: .text-gamma }
+
+Child pages can also have children (grand children). This is achieved by using a similar pattern on the child and grand child pages.
+
+1. Add the `has_children` attribute to the child
+1. Add the `parent` and `grand_parent` attribute to the grandchild
+
+#### Example
+{: .no_toc }
+
+```yaml
 ---
+layout: default
+title: Buttons
+parent: UI Components
+nav_order: 2
+has_children: true
+---
+```
 
-## Breadcrumbs
+```yaml
+---
+layout: default
+title: Buttons Child Page
+parent: Buttons
+grand_parent: UI Components
+nav_order: 1
+---
+```
+
+Would create the following navigation structure:
 
-Breadcrumbs are auto generated based on the parent/child structure and the directory structure for the site. In order for breadcrumbs to work correctly for pages children, the URL structure must be the slugified version of the parent page's title. For example, the page UI Components, must use the `/ui-components` directory to house its descendant pages.
+```
++-- ..
+|
+|-- UI Components
+|   |-- ..
+|   |
+|   |-- Buttons
+|   |   |-- Button Child Page
+|   |
+|   |-- ..
+|
++-- ..
+```
+
+---
+
+## Auxiliary Navigation
+
+To add a auxiliary navigation item to your site (in the upper right on all pages), add it to the `aux_nav` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-nav) in your site's `_config.yml` file.
+
+#### Example
+{: .no_toc }
+
+```yml
+# Aux links for the upper right navigation
+aux_links:
+"Just the Docs on GitHub":
+    - "//github.com/pmarsceill/just-the-docs"
+```
 
 ---
 
diff --git a/docs/ui-components/buttons.md b/docs/ui-components/buttons.md
index 849071df4e68822b1f257867edea023149657b80..8da7729d1a595ec6812fd1fb37c1a34901e52a96 100644
--- a/docs/ui-components/buttons.md
+++ b/docs/ui-components/buttons.md
@@ -21,7 +21,6 @@ nav_order: 2
 ### Links that look like buttons
 
 <div class="code-example" markdown="1">
-
 [Link button](http://example.com/){: .btn }
 
 [Link button](http://example.com/){: .btn .btn-purple }
@@ -32,7 +31,6 @@ nav_order: 2
 
 </div>
 ```markdown
-
 [Link button](http://example.com/){: .btn }
 
 [Link button](http://example.com/){: .btn .btn-purple }
diff --git a/docs/ui-components/labels.md b/docs/ui-components/labels.md
index 710218fc7254f6de47a3206bd061a92dc1e4dd8b..f3742469f93529db85d4729242c69f77e1470831 100644
--- a/docs/ui-components/labels.md
+++ b/docs/ui-components/labels.md
@@ -31,7 +31,6 @@ Deprecated
 
 </div>
 ```markdown
-
 Default label
 {: .label }
 
@@ -49,5 +48,4 @@ Coming soon
 
 Deprecated
 {: .label .label-red}
-
 ```
diff --git a/docs/ui-components/ui-components.md b/docs/ui-components/ui-components.md
index 00e34b84d1e28d1547140eb1122228e679423217..7d75a694c4ccdb28c27c062da411f141c09f0528 100644
--- a/docs/ui-components/ui-components.md
+++ b/docs/ui-components/ui-components.md
@@ -3,8 +3,7 @@ layout: default
 title: UI Components
 nav_order: 3
 has_children: true
-parent: UI Components
-permalink: /ui-components
+permalink: /docs/ui-components
 ---
 
 # UI Components
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/docs/utilities/layout.md b/docs/utilities/layout.md
index 33f49516ea49e0f5eeeef9571130cfbd777ca1ab..a1b564ef3a41c34409cfcb0ecaffcb588441ff1a 100644
--- a/docs/utilities/layout.md
+++ b/docs/utilities/layout.md
@@ -3,6 +3,7 @@ layout: default
 title: Layout
 nav_order: 2
 parent: Utilities
+has_children: true
 ---
 
 # Layout Utilities
diff --git a/docs/utilities/utilities.md b/docs/utilities/utilities.md
index 58cdf0180033aa14556bbcf8ed23aa220e61b152..b3683375712dba49144c418812763422c3a2d89d 100644
--- a/docs/utilities/utilities.md
+++ b/docs/utilities/utilities.md
@@ -2,9 +2,8 @@
 layout: default
 title: Utilities
 nav_order: 4
-parent: Utilities
 has_children: true
-permalink: /utilities
+permalink: docs/utilities
 ---
 
 # Utilities
diff --git a/index.md b/index.md
index 66c833903fdea3fdf8a9be21b7361d15a40f8600..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 }
 
 ---
 
@@ -20,7 +20,14 @@ Just the Docs gives your documentation a jumpstart with a responsive Jekyll them
 ### Dependencies
 Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/quickstart/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages standard Jekyll compiler.
 
-### Installation
+### Quick start: Use as a GitHub Pages remote theme
+1. Add Just the Docs to your Jekyll site's `_config.yml` as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/)
+```yaml
+remote_theme: pmarsceill/just-the-docs
+```
+<small>You must have GitHub pages enabled on your repo, one or more markdown files, and a `_config.yml` file. [See an example repository](https://github.com/pmarsceill/jtd-remote)</small>
+
+### Local installation: Use the gem-based theme
 1. Install the Ruby Gem
 ```bash
 $ gem install just-the-docs
@@ -29,7 +36,7 @@ $ gem install just-the-docs
 # .. or add it to your your Jekyll site’s Gemfile
 gem "just-the-docs"
 ```
-2. Add Just the Docs to your Jekyll site’s `config.yml`
+2. Add Just the Docs to your Jekyll site’s `_config.yml`
 ```yaml
 theme: "just-the-docs"
 ```
@@ -47,6 +54,10 @@ $ bundle exec jekyll serve
 ```
 4. Point your web browser to [http://localhost:4000](http://localhost:4000)
 
+### Configure Just the Docs
+- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %})
+
+
 ---
 
 ## About the project
diff --git a/just-the-docs.gemspec b/just-the-docs.gemspec
index b0925867ad7a35f727b2eabdd65674772d8ebaa6..e04303743c8327efdb52e8e68a5fb0260c780a88 100644
--- a/just-the-docs.gemspec
+++ b/just-the-docs.gemspec
@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "just-the-docs"
-  spec.version       = "0.1.6"
+  spec.version       = "0.2.0"
   spec.authors       = ["Patrick Marsceill"]
   spec.email         = ["patrick.marsceill@gmail.com"]
 
@@ -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
diff --git a/package.json b/package.json
index beb4433115d151e128ba57c8bdb3f2917c5836d0..d1a87bbbf5460c66ed5ef5fde437d05fd7ea117a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "just-the-docs",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "A Jekyll theme for documentation",
   "repository": "pmarsceill/just-the-docs",
   "license": "MIT",