diff --git a/.stylelintrc.json b/.stylelintrc.json
index 108fc517f8cba7c23c5661e4d13d262cc224cd9d..2253e64e4b427c49730931355865fa42056b39dd 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,7 +1,7 @@
{
"ignoreFiles" : [
- "assets/css/just-the-docs.scss",
- "assets/css/dark-mode-preview.scss",
+ "assets/css/just-the-docs-light.scss",
+ "assets/css/just-the-docs-dark.scss",
"_sass/vendor/**/*.scss"
],
"extends": [
diff --git a/_config.yml b/_config.yml
index d12d4396fc5618f4066b678e42aff98d66f235a8..17441c008b8e0576ffdc9935e5efe04566f9de67 100644
--- a/_config.yml
+++ b/_config.yml
@@ -35,7 +35,7 @@ aux_links:
# Footer content appears at the bottom of every page's main content
footer_content: "Copyright © 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
-# Color scheme currently only supports "dark" or nil (default)
+# Color scheme currently only supports "dark" or "light"/nil (default)
color_scheme: nil
# Google Analytics Tracking (optional)
diff --git a/_includes/head.html b/_includes/head.html
index eae6a5e9f04f6906147a224afe162124ff7b8835..f7ab6edf7bacc19eae5910e55a2b67a7332617b3 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -12,7 +12,11 @@
<link rel="shortcut icon" href="{{ 'favicon.ico' | absolute_url }}" type="image/x-icon">
- <link rel="stylesheet" href="{{ '/assets/css/just-the-docs.css' | absolute_url }}">
+ {% assign color_scheme = site.color_scheme %}
+ {% if color_theme == nil %}
+ {% assign color_scheme = 'light' %}
+ {% endif %}
+ <link rel="stylesheet" href="{{ color_scheme | prepend: '/assets/css/just-the-docs-' | append: '.css' | absolute_url }}">
{% if site.ga_tracking != nil %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.ga_tracking }}"></script>
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index f0e65057c864918b5b1f103876862b6892b579c7..333c2b19eda0e8114038ed4a331bcb7b83520bb1 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -1,3 +1,4 @@
+// override this file to change the dark theme
$body-background-color: $grey-dk-300;
$sidebar-color: $grey-dk-300;
diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e9624b3ceff95c465aafb4e71d18274a03689664
--- /dev/null
+++ b/_sass/color_schemes/light.scss
@@ -0,0 +1 @@
+// override this file to change the light (default) theme
\ No newline at end of file
diff --git a/assets/css/dark-mode-preview.scss b/_sass/modules.scss
similarity index 54%
rename from assets/css/dark-mode-preview.scss
rename to _sass/modules.scss
index 8b77da6a86422fb0fea410952175c34f65525478..c0b017b01084e5c10d710908037fdb58f58d578e 100644
--- a/assets/css/dark-mode-preview.scss
+++ b/_sass/modules.scss
@@ -1,28 +1,11 @@
----
-# 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";
@@ -38,4 +21,4 @@
//
// Import custom overrides
//
-@import "./custom/custom";
+@import "./custom/custom";
\ No newline at end of file
diff --git a/assets/css/just-the-docs-dark.scss b/assets/css/just-the-docs-dark.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a19ffc705f930b4ff2e303055279b229dc9e488a
--- /dev/null
+++ b/assets/css/just-the-docs-dark.scss
@@ -0,0 +1,5 @@
+---
+---
+@import "./support/support";
+@import "./color_schemes/dark";
+@import "./modules";
\ No newline at end of file
diff --git a/assets/css/just-the-docs-light.scss b/assets/css/just-the-docs-light.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c32b3148c6d790c81b1bfd452a5801425c8e46ad
--- /dev/null
+++ b/assets/css/just-the-docs-light.scss
@@ -0,0 +1,5 @@
+---
+---
+@import "./support/support";
+@import "./color_schemes/light";
+@import "./modules";
diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss
deleted file mode 100644
index 6a2eefa5ca319368e85410163b74139dacb98eb0..0000000000000000000000000000000000000000
--- a/assets/css/just-the-docs.scss
+++ /dev/null
@@ -1,44 +0,0 @@
----
-# 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 overrides
-//
-
-@import "./custom/custom";
-
-//
-// Import custom color scheme scss
-//
-
-{% if site.color_scheme == "dark" %}
-@import "./color_schemes/dark.scss";
-{% endif %}
-
-// Modules
-@import "./base";
-@import "./layout";
-@import "./content";
-@import "./navigation";
-@import "./typography";
-@import "./labels";
-@import "./buttons";
-@import "./search";
-@import "./tables";
-@import "./code";
-@import "./utilities/utilities";
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index aadbf82670d9386ccf8315378d4be7265bb87ff6..c765a9be745c6f7b9bc10e1207bd73ecbc439439 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -274,11 +274,25 @@ function initSearch() {
}
}
+// Focus
+
function pageFocus() {
var mainContent = document.querySelector('.js-main-content');
mainContent.focus();
}
+// Switch theme
+
+jtd.getTheme = function() {
+ var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
+ return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
+}
+
+jtd.setTheme = function(theme) {
+ var cssFile = document.querySelector('[rel="stylesheet"]');
+ cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | absolute_url }}' + theme + '.css');
+}
+
// Document ready
jtd.onReady(function(){
diff --git a/docs/configuration.md b/docs/configuration.md
index 14422fdfa64bcc58eec9f6ee8cbce802d5a4104e..cb00b1a67ee19ec340935767183f1d47b765243d 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -67,17 +67,14 @@ color_scheme: "dark"
<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');
jtd.addEvent(toggleDarkMode, 'click', function(){
- if (cssFile.getAttribute('href') === originalCssRef) {
- cssFile.setAttribute('href', darkModeCssRef);
+ if (jtd.getTheme() === 'dark') {
+ jtd.setTheme('light');
} else {
- cssFile.setAttribute('href', originalCssRef);
+ jtd.setTheme('dark');
}
-})
+});
</script>
See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
diff --git a/docs/customization.md b/docs/customization.md
index eccb4bc2791e3e1867d9aa06dbbcda139e66f9db..6f715bf06459f60dfb0069125c1fd89708e25276 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -36,17 +36,14 @@ color_scheme: "dark"
<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');
jtd.addEvent(toggleDarkMode, 'click', function(){
- if (cssFile.getAttribute('href') === originalCssRef) {
- cssFile.setAttribute('href', darkModeCssRef);
+ if (jtd.getTheme() === 'dark') {
+ jtd.setTheme('light');
} else {
- cssFile.setAttribute('href', originalCssRef);
+ jtd.setTheme('dark');
}
-})
+});
</script>
## Specific visual customization