Add button for switching to dark mode. At least for now.

Author: Steveb-p

Diff for: docs/_includes/nav.html

@@ -0,0 +1,62 @@
+<nav role="navigation" aria-label="Main navigation">
+  <p>
+    <button class="btn js-toggle-dark-mode">Switch to dark</button>
+  </p>
+
+  <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>
+  <ul class="navigation-list">
+    {% 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 %}
+      {% endunless %}
+    {% endfor %}
+  </ul>
+</nav>

Diff for: docs/index.md

@@ -3,6 +3,7 @@
 # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
 
 layout: default
+title: Index
 ---
 
 <h2 align="center">Supporting Enqueue</h2>