diff --git a/README.md b/README.md index b980760..3dbabdd 100644 --- a/README.md +++ b/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 + ``` + + diff --git a/custom_theme/assets/javascripts/themetoggle.js b/custom_theme/assets/javascripts/themetoggle.js new file mode 100644 index 0000000..0f300f5 --- /dev/null +++ b/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(); +} diff --git a/custom_theme/main.html b/custom_theme/main.html new file mode 100644 index 0000000..90ca5c3 --- /dev/null +++ b/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 #} + +{% endblock %} \ No newline at end of file diff --git a/custom_theme/partials/header.html b/custom_theme/partials/header.html new file mode 100644 index 0000000..222917d --- /dev/null +++ b/custom_theme/partials/header.html @@ -0,0 +1,84 @@ + + + +
+ + + +
\ No newline at end of file diff --git a/custom_theme/partials/themetoggle.html b/custom_theme/partials/themetoggle.html new file mode 100644 index 0000000..037d0aa --- /dev/null +++ b/custom_theme/partials/themetoggle.html @@ -0,0 +1,16 @@ + + +
+
+ +
+
+ {% set icon = "octicons/sun-24" %} + {% include ".icons/" ~ icon ~ ".svg" %} +
+ +
+ {% set icon = "octicons/moon-24" %} + {% include ".icons/" ~ icon ~ ".svg" %} +
+
\ No newline at end of file diff --git a/mk_ultra.css b/mk_ultra.css index d7c3f2a..69b9ffb 100644 --- a/mk_ultra.css +++ b/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; +} \ No newline at end of file