Use local storage for theme.

sites/hurl.dev/_includes/common.js

@@ -0,0 +1,68 @@
+addEventListener("load", onLoad);
+
+function toggleElem() {
+    return document.getElementById("theme-toggle");
+}
+
+function menuElem() {
+    return document.getElementById("menu");
+}
+
+
+function onLoad() {
+    const systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)");
+    const defaultTheme = systemInitiatedDark.matches ? "dark" : "light";
+
+    // This checks for local storage telling to override the system preferences
+    let currentTheme = localStorage.getItem("theme");
+    if (!currentTheme) {
+        currentTheme = defaultTheme;
+    }
+
+    setTheme(currentTheme);
+
+    toggleElem().addEventListener("click", onThemeClick);
+    menuElem().addEventListener("click", onMenuClick);
+    systemInitiatedDark.addEventListener("change", onPreferColorSchemeChange);
+}
+
+function setTheme(theme) {
+    const lightElem = "<span class=\"svg-icon\"><svg viewBox=\"0 0 512 512\" width=\"18\" height=\"18\"><use href=\"#sun\"></use></svg>&nbsp;</span><span class=\"u-underline\">Theme</span>";
+    const darkElem = "<span class=\"svg-icon\"><svg viewBox=\"0 0 512 512\" width=\"18\" height=\"18\"><use href=\"#moon\"></use></svg>&nbsp;</span><span class=\"u-underline\">Theme</span>";
+    document.documentElement.setAttribute("data-theme", theme);
+    if (theme === "dark") {
+        toggleElem().innerHTML = lightElem;
+    }
+    else {
+        toggleElem().innerHTML = darkElem;
+    }
+    localStorage.setItem("theme", theme);
+}
+
+function onMenuClick() {
+    const x = document.getElementById("top-nav-toc");
+    if (x.style.display !== "block") {
+        x.style.display = "block";
+    } else {
+        x.style.display = "none";
+    }
+}
+
+function onPreferColorSchemeChange(e) {
+    if (e.matches) {
+        setTheme("dark");
+    } else {
+        setTheme("light");
+    }
+}
+
+function onThemeClick() {
+    const currentTheme = localStorage.getItem("theme");
+    if (currentTheme === "dark") {
+        setTheme("light");
+    } else if (currentTheme === "light") {
+        setTheme("dark");
+    } else {
+        setTheme("light");
+    }
+}

sites/hurl.dev/_includes/footer.html

@@ -7,5 +7,3 @@
     </div>
 </footer>
 
-<script src="{{ '/assets/js/common.js' | prepend:site.baseurl }}?{{site.env.CI_COMMIT_SHORT_SHA}}"></script>
-

sites/hurl.dev/_includes/head.html

@@ -10,3 +10,6 @@
 <link rel="apple-touch-icon" sizes="152x152" href="{{ '/assets/img/hurl-icon-152.png' | prepend:site.baseurl }}" />
 <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/img/hurl-icon-180.png' | prepend:site.baseurl }}" />
 <link rel="apple-touch-icon" sizes="167x167" href="{{ '/assets/img/hurl-icon-167.png' | prepend:site.baseurl }}" />
+<script type="text/javascript">
+{% include common.js %}
+</script>