better structure of code

templates/static/app.js

@@ -0,0 +1,93 @@
+document.addEventListener("DOMContentLoaded", function () {
+    changeTheme();
+    initcolorTheme();
+    apply_stickies();
+});
+
+function changeTheme() {
+    let toggleBtn = document.querySelector("#theme-toggle-js");
+
+    if (toggleBtn) {
+        toggleBtn.addEventListener("click", function () {
+            if (toggleBtn.dataset.theme === "light") {
+                setTheme("dark", true);
+            } else {
+                setTheme("light", true);
+            }
+        });
+    }
+}
+
+/***
+ * init javascript
+ * 1) detect native color scheme or use set theme in local storage
+ * 2) detect view (desktop or responsive) if on mobile device with touch screen
+ * 3) set base font size to 112.5% -> 18px
+ */
+function initcolorTheme() {
+    colorThemeWatcher();
+    let theme = localStorage.getItem("theme");
+    if (theme == null || theme === "auto") {
+        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            setTheme("dark", false);
+        } else {
+            setTheme("light", false);
+        }
+    } else {
+        setTheme(theme);
+    }
+}
+
+/***
+ * Listener operating system native color configuration
+ */
+function colorThemeWatcher() {
+    try {
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+            setTheme(e.matches ? "dark" : "light");
+        });
+    } catch {
+        console.warn("color theme watcher not supported");
+    }
+}
+
+/**
+ * Define color scheme, colors without losing the base font size configuration
+ * and add data-theme to html tag
+ * @param theme
+ */
+function setTheme(theme, setLocalStorage = true) {
+    let toggleBtn = document.querySelector("#theme-toggle-js");
+
+    if (setLocalStorage) {
+        localStorage.setItem("theme", theme);
+    }
+    if (toggleBtn) toggleBtn.setAttribute("data-theme", theme);
+
+    if (document.documentElement.dataset.theme === "dark" && theme === "light") {
+        document.documentElement.dataset.theme = "light";
+    } else if (document.documentElement.dataset.theme === "light" && theme === "dark") {
+        document.documentElement.dataset.theme = "dark";
+    }
+}
+
+window.addEventListener("scroll", function () {
+    apply_stickies();
+});
+
+function apply_stickies() {
+      var _$stickies = [].slice.call(document.querySelectorAll('details[open] .sticky'))
+      _$stickies.forEach(function (_$sticky) {
+        if (CSS.supports && CSS.supports("position", "sticky")) {
+            apply_sticky_class(_$sticky);
+        }
+    });
+}
+
+function apply_sticky_class(_$sticky) {
+    var currentOffset = _$sticky.getBoundingClientRect().top;
+    var stickyOffset = parseInt(getComputedStyle(_$sticky).top.replace("px", ""));
+    var isStuck = currentOffset <= stickyOffset;
+
+    _$sticky.classList.toggle("js-is-sticky", isStuck);
+}