new: Added dark and light theme switching

templates/default/assets/js/global.js

@@ -0,0 +1,57 @@
+let theme;
+
+if (localStorage.getItem("theme") === null) {
+    theme = "dark";
+} else {
+    theme = localStorage.getItem("theme");
+}
+
+replaceCssFile();
+setTheme();
+
+function changeTheme() {
+    if (theme === "dark") {
+        theme = "light";
+    } else {
+        theme = "dark";
+    }
+
+    localStorage.setItem("theme", theme);
+    replaceCssFile();
+    setTheme();
+}
+
+function setTheme() {
+    const root = document.documentElement;
+    root.style.setProperty("--primary-color", `var(--${theme}-primary-color)`);
+    root.style.setProperty("--secondary-color", `var(--${theme}-secondary-color)`);
+
+    root.style.setProperty("--primary-text-color", `var(--${theme}-primary-text-color)`);
+    root.style.setProperty("--secondary-text-color", `var(--${theme}-secondary-text-color)`);
+
+    root.style.setProperty("--background-color", `var(--${theme}-background-color)`);
+
+    const logo = document.querySelector(".main-logo-img")
+    if (logo !== null) {
+        logo.style.setProperty("background-image", `url(../assets/img/logo-${theme}-theme.png)`);
+    }
+}
+
+function replaceCssFile() {
+    let oldHref, newHref;
+    if (theme === "dark") {
+        oldHref = "xcode-light.css";
+        newHref = "xcode-dark.css";
+    } else {
+        oldHref = "xcode-dark.css";
+        newHref = "xcode-light.css";
+    }
+
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+        if (link.href.includes(oldHref)) {
+            link.href = "../assets/css/lib/" + newHref;
+            break;
+        }
+    }
+}