[Theme] fix persist pages

[Fix] no more sudo for dev
[Fix] hamburger undefined
2026-08-09 06:53:25 +02:00 · 2026-08-09 06:26:17 +02:00 · 2026-08-09 06:08:56 +02:00 · 2026-08-09 06:07:20 +02:00 · 2026-08-09 06:02:28 +02:00
7 changed files with 49 additions and 72 deletions
@@ -17,6 +17,7 @@ events.ical
 .vscode/
 events.html
 events_archive.html
+nginx.pid


 !site/lif*
@@ -1 +0,0 @@
-172000
@@ -6,7 +6,7 @@
  <link rel="stylesheet" href="/styles/style.css">
  <link rel="stylesheet" href="/styles/404.css">
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
-  <script src="/scripts/main.js" defer></script>
+  <script src="/scripts/main.js"></script>
  <title>404</title>
 </head>
 <body>
@@ -1,16 +1,6 @@
 <!doctype html>
 <html lang="sr">
  <head>
-    <script>
-      (function () {
-        const theme = localStorage.getItem("theme");
-        const prefersDark = window.matchMedia(
-          "(prefers-color-scheme: dark)",
-        ).matches;
-        if (theme === "dark" || (!theme && prefersDark))
-          document.documentElement.classList.add("dark");
-      })();
-    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

@@ -42,7 +32,7 @@
    <link rel="stylesheet" href="/styles/style.css" />
    <link rel="stylesheet" href="/styles/deconference.css">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
-    <script src="/scripts/main.js" defer></script>
+    <script src="/scripts/main.js"></script>
    <title>Dekonferencija Decentrala</title>
    <link rel="alternate" hreflang="en" href="/en/deconference" />
  </head>
@@ -1,37 +1,49 @@
-window.addEventListener("DOMContentLoaded", () => {
+(function () {
+  const theme = window.localStorage.getItem("theme");
+  const prefersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  const isDark = theme === "dark" || (!theme && prefersDark);

+  if (isDark) document.documentElement.classList.add("dark");
+
+  // Swap images as soon as DOM is ready (script runs in <head>, imgs not parsed yet)
+  if (isDark) {
+    window.addEventListener("DOMContentLoaded", () => {
+      document.querySelectorAll("img[src*='-light']").forEach((img) => {
+        img.src = img.src.replace("-light", "-dark");
+      });
+    }, { once: true });
+  }
+
+  window.changeTheme = (toDark) => {
+    if (toDark) {
+      window.localStorage.setItem("theme", "dark");
+      document.documentElement.classList.add("dark");
+      document.querySelectorAll("img[src*='-light']").forEach((img) => {
+        img.src = img.src.replace("-light", "-dark");
+      });
+    } else {
+      window.localStorage.setItem("theme", "light");
+      document.documentElement.classList.remove("dark");
+      document.querySelectorAll("img[src*='-dark']").forEach((img) => {
+        img.src = img.src.replace("-dark", "-light");
+      });
+    }
+  }
+})();
+
+window.addEventListener("DOMContentLoaded", () => {
  const getById = (id) => document.getElementById(id);
  const getByClass = (className) => document.getElementsByClassName(className)[0];

  const themeBtn = getById("theme-switcher");
  const hamburger = getByClass("hamburger");
-  const hamburgerIcon = hamburger.children[0]
+  const hamburgerIcon = hamburger?.children[0];
  const menu = document.getElementsByTagName("nav")[0];
-  const imgs = document.getElementsByTagName("img");
  const main = document.getElementsByTagName("main")[0];
-  const isMenuOpen = () => hamburger.classList.contains("open");
-  const theme = window.localStorage.getItem("theme");
+  const isMenuOpen = () => hamburger?.classList.contains("open");

  /* Functions */

-  const changeToDarkTheme = () => {
-    window.localStorage.setItem("theme", "dark");
-    document.documentElement.classList.add("dark");
-    themeBtn?.setAttribute("title", "turn the light on");
-    Array.from(imgs).forEach((img) => {
-      if (img.src.includes("-light")) img.src = img.src.replace("-light", "-dark");
-    });
-  }
-
-  const changeToLightTheme = () => {
-    window.localStorage.setItem("theme", "light");
-    document.documentElement.classList.remove("dark");
-    themeBtn?.setAttribute("title", "turn the light off");
-    Array.from(imgs).forEach((img) => {
-      if (img.src.includes("-dark")) img.src = img.src.replace("-dark", "-light");
-    });
-  }
-
  const closeMenu = () => {
    hamburger.classList = "hamburger closed"
    hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
@@ -47,7 +59,7 @@ window.addEventListener("DOMContentLoaded", () => {
  /* Listeners */

  window.addEventListener("resize", () => isMenuOpen() && closeMenu());
-  main.addEventListener("click", () => isMenuOpen() && closeMenu());
+  if (main) main.addEventListener("click", () => isMenuOpen() && closeMenu());

  /* Language persistence */
  const currentLang = document.documentElement.lang || "sr";
@@ -63,23 +75,18 @@ window.addEventListener("DOMContentLoaded", () => {
        if (!href.startsWith(`/${currentLang}`)) {
          a.setAttribute("href", `/${currentLang}${href.slice(3)}`);
        }
-      } else {
-        // No language prefix, prepend currentLang
+      } else if (currentLang !== "sr") {
+        // Only prepend language prefix for non-default languages
        a.setAttribute("href", `/${currentLang}${href}`);
      }
    }
  });
  hamburger?.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());

-  themeBtn.addEventListener("click", () => {
-    const title = themeBtn.getAttribute("title") ?? "off"
-    if (title.indexOf("off") !== -1) changeToDarkTheme();
-    else changeToLightTheme();
-  });
-
-  /* Rest */
-
-  const userPerfersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches
-  if (!theme && userPerfersDark) changeToDarkTheme();
-  else theme === "light" ? changeToLightTheme() : changeToDarkTheme();
-})
+  if (themeBtn) {
+    themeBtn.addEventListener("click", () => {
+      const isDark = document.documentElement.classList.contains("dark");
+      changeTheme(!isDark);
+    });
+  }
+});
@@ -1,16 +1,6 @@
 <!doctype html>
 <html lang="en">
  <head>
-    <script>
-      (function () {
-        const theme = localStorage.getItem("theme");
-        const prefersDark = window.matchMedia(
-          "(prefers-color-scheme: dark)",
-        ).matches;
-        if (theme === "dark" || (!theme && prefersDark))
-          document.documentElement.classList.add("dark");
-      })();
-    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

@@ -1,16 +1,6 @@
 <!doctype html>
 <html lang="sr">
  <head>
-    <script>
-      (function () {
-        const theme = localStorage.getItem("theme");
-        const prefersDark = window.matchMedia(
-          "(prefers-color-scheme: dark)",
-        ).matches;
-        if (theme === "dark" || (!theme && prefersDark))
-          document.documentElement.classList.add("dark");
-      })();
-    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

@@ -42,7 +32,7 @@
    <link rel="stylesheet" href="/styles/style.css" />
    <!--ADDITIONAL_STYLE-->
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
-    <script src="/scripts/main.js" defer></script>
+    <script src="/scripts/main.js"></script>
    <title><!--TITLE--> Decentrala</title>
    <link rel="alternate" hreflang="en" href="/en/PAGE_NAME" />
  </head>
Author	SHA1	Message	Date
coja	904ed7e317	[Theme] fix persist pages	2026-08-09 06:53:25 +02:00
coja	f6093d9876	[Fix] no more sudo for dev	2026-08-09 06:26:17 +02:00
coja	740a90536d	[Fix] hamburger undefined	2026-08-09 06:08:56 +02:00
coja	26d1295006	[Fix] lang	2026-08-09 06:07:20 +02:00
coja	352709cec6	Revert "[Fix] no more sudo needed, runtime warn" This reverts commit `cc0127dbe3`.	2026-08-09 06:02:28 +02:00