update assets part 7

2022-11-23 08:58:02 +00:00
parent 608277f7de
commit e333bae8ca
146 changed files with 152992 additions and 0 deletions
--- a/assets/js/dark-mode.js
+++ b/assets/js/dark-mode.js
@@ -0,0 +1,79 @@
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+function setTheme(mode) {
+    if (mode !== "light" && mode !== "dark" && mode !== "auto") {
+        mode = "auto";
+    }
+
+    var themeToggleAutoIcon = document.getElementById('theme-icon-when-auto');
+    var themeToggleDarkIcon = document.getElementById('theme-icon-when-dark');
+    var themeToggleLightIcon = document.getElementById('theme-icon-when-light');
+
+    themeToggleAutoIcon.classList.add('hidden');
+    themeToggleDarkIcon.classList.add('hidden');
+    themeToggleLightIcon.classList.add('hidden');
+
+    if (mode === "dark") {
+        themeToggleDarkIcon.classList.remove('hidden');
+        document.documentElement.classList.add('dark');
+    } else if (mode === "auto") {
+        themeToggleAutoIcon.classList.remove('hidden');
+
+        if(prefersDark) {
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+        }
+    } else {
+        document.documentElement.classList.remove('dark');
+        themeToggleLightIcon.classList.remove('hidden');
+    }
+
+    localStorage.setItem('color-theme', mode);
+}
+
+function cycleTheme() {
+    const currentTheme = localStorage.getItem('color-theme') || "auto";
+
+    if (prefersDark) {
+        // Auto (dark) -> Light -> Dark
+        if (currentTheme === "auto") {
+            setTheme("light");
+        } else if (currentTheme === "light") {
+            setTheme("dark");
+        } else {
+            setTheme("auto");
+        }
+    } else {
+        // Auto (light) -> Dark -> Light
+        if (currentTheme === "auto") {
+            setTheme("dark");
+        } else if (currentTheme === "dark") {
+            setTheme("light");
+        } else {
+            setTheme("auto");
+        }
+    }
+}
+
+function initTheme() {
+    // set theme defined in localStorage if there is one, or fallback to auto mode
+    const currentTheme = localStorage.getItem('color-theme');
+    currentTheme ? setTheme(currentTheme) : setTheme("auto");
+}
+
+function setupTheme() {
+    // Attach event handlers for toggling themes
+    let buttons = document.getElementsByClassName("theme-toggle");
+    for (var i = 0; i < buttons.length; i++) {
+        buttons[i].addEventListener("click", cycleTheme);
+    };
+}
+
+
+initTheme();
+
+document.addEventListener('DOMContentLoaded', function() {
+    setupTheme();
+})