Theme Toggling Enabled

README.md

@@ -101,3 +101,28 @@ Parameters:
 
 
 ### external_markdown
+
+# Theme Switcher
+
+I have also added a theme switcher for the mkdocs material theme.
+This allows you to select between dark mode, and light mode.
+It uses localstorage to stash a "lightMode" token so it remembers the settings.
+
+To use the switcher you need to modify your mkdocs.yaml
+
+  - Include the custom.css file using the ```extra_css``` attribute
+
+  - Place the custom_theme in the base directory (the same one as the
+    mkdocs.yaml,  not the docs directory
+
+  - Configure in the config file using:
+
+    ```
+    theme:
+      name: material
+      palette:
+        scheme: preference
+      custom_dir: custom_theme
+    ```
+
+

custom_theme/assets/javascripts/themetoggle.js

@@ -0,0 +1,33 @@
+// Probably inefficent but who cares.
+toggleDiv = document.getElementById("themeToggle");
+lightDiv = document.getElementById("themeLight");
+darkDiv = document.getElementById("themeDark");
+
+//Check in storage
+lightMode = localStorage.getItem("lightMode");
+if (lightMode == null){
+    localStorage.setItem("lightMode", true);
+    lightMode = true;
+}
+
+changeTheme();
+
+
+function changeTheme(){
+    if (lightMode == true){
+        document.body.setAttribute("data-md-color-scheme", "default");
+        lightDiv.classList.remove("darkIcon");
+        darkDiv.classList.add("darkIcon");
+    }
+    else {
+        document.body.setAttribute("data-md-color-scheme", "slate");
+        lightDiv.classList.add("darkIcon");
+        darkDiv.classList.remove("darkIcon");
+    }
+}
+
+toggleDiv.onclick = function(){
+    lightMode = !lightMode;
+    localStorage.setItem("lightMode", lightMode);
+    changeTheme();
+}

custom_theme/main.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block scripts %}
+    {{ super() }}  {# Call super to load the parent version of this #}
+
+    {# Then add our part of the script to the end of it #}
+    <script src="{{ 'assets/javascripts/themetoggle.js' | url }}"></script>
+{% endblock %}

custom_theme/partials/header.html

@@ -0,0 +1,84 @@
+<!--
+  Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Application header -->
+<header class="md-header" data-md-component="header">
+
+    <!-- Top-level navigation -->
+    <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
+
+      <!-- Link to home -->
+      <a
+        href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
+        title="{{ config.site_name }}"
+        class="md-header-nav__button md-logo"
+        aria-label="{{ config.site_name }}"
+      >
+        {% include "partials/logo.html" %}
+      </a>
+
+      <!-- Button to open drawer -->
+      <label class="md-header-nav__button md-icon" for="__drawer">
+        {% include ".icons/material/menu" ~ ".svg" %}
+      </label>
+
+      <!-- Header title -->
+      <div class="md-header-nav__title" data-md-component="header-title">
+        {% if config.site_name == page.title %}
+          <div class="md-header-nav__ellipsis md-ellipsis">
+            {{ config.site_name }}
+          </div>
+        {% else %}
+          <div class="md-header-nav__ellipsis">
+            <span class="md-header-nav__topic md-ellipsis">
+              {{ config.site_name }}
+            </span>
+            <span class="md-header-nav__topic md-ellipsis">
+              {% if page and page.meta and page.meta.title %}
+                {{ page.meta.title }}
+              {% else %}
+                {{ page.title }}
+              {% endif %}
+            </span>
+          </div>
+        {% endif %}
+      </div>
+
+      <!-- Button to open search dialogue -->
+      {% if "search" in config["plugins"] %}
+        <label class="md-header-nav__button md-icon" for="__search">
+          {% include ".icons/material/magnify.svg" %}
+        </label>
+
+        <!-- Search interface -->
+        {% include "partials/search.html" %}
+      {% endif %}
+
+      <!-- Repository containing source -->
+
+      {% if config.repo_url %}
+        <div class="md-header-nav__source">
+          {% include "partials/source.html" %}
+        </div>
+      {% endif %}
+
+      <!-- Dark Mode Tagging -->
+      {% include "partials/themetoggle.html" %}
+    </nav>
+  </header>

custom_theme/partials/themetoggle.html

@@ -0,0 +1,16 @@
+
+
+<div id="themeToggle2" class="md-source__icon md-icon">
+</div>
+
+<div id="themeToggle">
+    <div id="themeLight" class="md-source__icon md-icon">
+        {% set icon = "octicons/sun-24" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
+    </div>
+
+    <div id="themeDark" class="md-source__icon md-icon">
+        {% set icon = "octicons/moon-24" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
+    </div>
+</div>

mk_ultra.css

@@ -66,3 +66,16 @@
 .code-input{
     color: #F00;
 }
+
+/* ---- For the Theme Switcher --> */
+
+/* Make Links in Dark mode green so they stick out */
+[data-md-color-scheme=slate]{
+    --md-text-link-color: #00ca00;
+}
+
+/* Darker Icon */
+.darkIcon {
+    /*color: var(--md-default-fg-color);*/
+    color: grey;
+}