dark mode toggle, css vars

2025-07-28 18:24:38 -05:00 · 2022-04-09 21:45:15 -07:00
parent 39f3c553f5
commit 44b068b9c2
4 changed files with 326 additions and 233 deletions
--- a/docs/_static/js/darkmode.js
+++ b/docs/_static/js/darkmode.js
@@ -0,0 +1,47 @@
+let toggleButton;
+let icon;
+
+function load() {
+	"use strict";
+
+	toggleButton = document.createElement("button");
+	toggleButton.setAttribute("title", "Toggle dark mode");
+	toggleButton.classList.add("dark-mode-toggle");
+	icon = document.createElement("i");
+	icon.classList.add("fa", darkModeState ? "fa-sun-o" : "fa-moon-o");
+	toggleButton.appendChild(icon);
+	document.body.prepend(toggleButton);
+
+	// Listen for changes in the OS settings
+	// addListener is used because older versions of Safari don't support addEventListener
+	// prefersDarkQuery set in <head>
+	if (prefersDarkQuery) {
+		prefersDarkQuery.addListener(function (evt) {
+			toggleDarkMode(evt.matches);
+		});
+	}
+
+	// Initial setting depending on the prefers-color-mode or localstorage
+	// darkModeState should be set in the document <head> to prevent flash
+	if (darkModeState == undefined) darkModeState = false;
+	toggleDarkMode(darkModeState);
+
+	// Toggles the "dark-mode" class on click and sets localStorage state
+	toggleButton.addEventListener("click", () => {
+		darkModeState = !darkModeState;
+
+		toggleDarkMode(darkModeState);
+		localStorage.setItem("dark-mode", darkModeState);
+	});
+}
+
+function toggleDarkMode(state) {
+	document.documentElement.classList.toggle("dark-mode", state);
+	document.documentElement.classList.toggle("light-mode", !state);
+	icon.classList.remove("fa-sun-o");
+	icon.classList.remove("fa-moon-o");
+	icon.classList.add(state ? "fa-sun-o" : "fa-moon-o");
+	darkModeState = state;
+}
+
+document.addEventListener("DOMContentLoaded", load);