Make themes more customizable

(cherry picked from commit dffb2706a158784e2f3091f895a868e373683bc8)

.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": [

_config.yml

@@ -35,7 +35,7 @@ aux_links:
 # Footer content appears at the bottom of every page's main content
 footer_content: "Copyright &copy; 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)

_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>

_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;

_sass/color_schemes/light.scss

@@ -0,0 +1 @@
+// override this file to change the light (default) theme

_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";

assets/css/just-the-docs-dark.scss

@@ -0,0 +1,5 @@
+---
+---
+@import "./support/support";
+@import "./color_schemes/dark";
+@import "./modules";

assets/css/just-the-docs-light.scss

@@ -0,0 +1,5 @@
+---
+---
+@import "./support/support";
+@import "./color_schemes/light";
+@import "./modules";

assets/css/just-the-docs.scss

@@ -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";

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(){

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.

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