Clean up colors and docs

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.

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.

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