diff --git a/_sass/base.scss b/_sass/base.scss
index 4f66caa190176b0b0db8f3c94e280d9847fddf58..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;
}
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
index 7fcb21097e43b7d1c44117e31c6bcff7735dc1e1..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);
}
@@ -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;
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index fb8847b6e927a1aecb44e065d3b8cce7c2f24837..6c2e8a9caabfbfa35c6101b769c24ace2d23e7f4 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -7,7 +7,8 @@ $body-text-color: $grey-lt-300;
$body-heading-color: $grey-lt-000;
$nav-child-link-color: $grey-dk-000;
-$link-color: lighten($purple-000, 8%);
-$btn-primary-color: $purple-200;
+$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/navigation.scss b/_sass/navigation.scss
index 4628a64d278bc103dbf1d9b50957d52db17c0fda..0a5fb7d3aa5f88be4959d2956cfa98a4b8266c5e 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -45,7 +45,7 @@
position: absolute;
margin-top: 0.3em;
margin-left: -0.8em;
- color: $border-color;
+ color: rgba($body-text-color, 0.3);
content: "- ";
}
diff --git a/_sass/search.scss b/_sass/search.scss
index d19d6fd050e2c4c28f3a5b990173541554a14bf1..32ec1dbe225ecc5f1ca4f09fe3eb3522ccb9bfb7 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -39,7 +39,7 @@
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);
}
}
@@ -65,7 +65,7 @@
box-shadow: none;
+ .search-icon {
- fill: $purple-000;
+ fill: $link-color;
}
}
@@ -108,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 ce25353c8c8588a4232bdc42339e1c2d704dcd61..8a09eda365c8675d38387928e96a0852e70be8bc 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -59,6 +59,7 @@ $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 1cd50cd168e0db854669b4731e9d8a563e2f2fb8..39bc0dc38e9dcd5a30b1f0969db3537fd34b8a16 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -25,7 +25,7 @@ td {
padding-right: $sp-3;
padding-bottom: $sp-2;
padding-left: $sp-3;
- background-color: lighten($body-background-color, 1%);
+ background-color: lighten($body-background-color, 2%);
border-bottom: $border rgba($border-color, 0.5);
border-left: $border $border-color;
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/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