From d1051be74bad7740eebea18ce103846786485e3b Mon Sep 17 00:00:00 2001
From: coja <smth@smth.com>
Date: Fri, 1 May 2026 23:27:36 +0200
Subject: [PATCH] [JS] refactor

---
 site/scripts/main.js | 91 ++++++++++++++++----------------------------
 1 file changed, 32 insertions(+), 59 deletions(-)

diff --git a/site/scripts/main.js b/site/scripts/main.js
index bad0f13..faa8b52 100644
--- a/site/scripts/main.js
+++ b/site/scripts/main.js
@@ -1,40 +1,22 @@
-const theme_switcher = document.getElementById("theme-switcher");
+const getById = (id) => document.getElementById(id);
+const docStyle = document.documentElement.style;
+
+const theme_switcher = getById("theme-switcher");
+const sections_button = getById("sections-button");
 const imgs = document.getElementsByTagName("img");
-const sections_button = document.getElementById("sections-button");
 const sections_menu = document.getElementsByTagName("nav")[0];
 const main = document.getElementsByTagName("main")[0];
+const isMenuOpen = sections_button.getAttribute("opened") === "true"
+const theme = window.localStorage.getItem("theme");
+const menuSrc = sections_button.children[0].src
 
-let theme = window.localStorage.getItem("theme");
-
-if (theme !== null) {
-  if (theme === "light") {
-    changeToLightTheme();
-  } else {
-    changeToDarkTheme();
-  }
-} else {
-  if (
-    window.matchMedia &&
-    window.matchMedia("(prefers-color-scheme: dark)").matches
-  ) {
-    changeToDarkTheme();
-  }
-}
-
-theme_switcher.addEventListener("click", () => {
-  const attribute = theme_switcher.getAttribute("title") ?? "off"
-  if (attribute.indexOf("off") !== -1) {
-    changeToDarkTheme();
-  } else {
-    changeToLightTheme();
-  }
-});
+/* Functions */
 
 function changeToDarkTheme() {
   theme_switcher?.setAttribute("title", "turn the light on");
-  document.documentElement.style.setProperty("--border", "var(--dark-border)");
-  document.documentElement.style.setProperty("--text", "var(--dark-text)");
-  document.documentElement.style.setProperty("--bg", "var(--dark-bg)");
+  docStyle.setProperty("--border", "var(--dark-border)");
+  docStyle.setProperty("--text", "var(--dark-text)");
+  docStyle.setProperty("--bg", "var(--dark-bg)");
   window.localStorage.setItem("theme", "dark");
   for (let i = 0; i < imgs.length; i += 1) {
     imgs[i].src = imgs[i].src.replace("-light", "-dark");
@@ -43,9 +25,9 @@ function changeToDarkTheme() {
 
 function changeToLightTheme() {
   theme_switcher?.setAttribute("title", "turn the light off");
-  document.documentElement.style.setProperty("--border", "var(--light-border)");
-  document.documentElement.style.setProperty("--text", "var(--light-text)");
-  document.documentElement.style.setProperty("--bg", "var(--light-bg)");
+  docStyle.setProperty("--border", "var(--light-border)");
+  docStyle.setProperty("--text", "var(--light-text)");
+  docStyle.setProperty("--bg", "var(--light-bg)");
   window.localStorage.setItem("theme", "light");
   for (let i = 0; i < imgs.length; i += 1) {
     imgs[i].src = imgs[i].src.replace("-dark", "-light");
@@ -54,41 +36,32 @@ function changeToLightTheme() {
 
 function closeMenu() {
   sections_button.setAttribute("opened", "false");
-  sections_button.children[0].src = sections_button.children[0].src.replace(
-    "opened",
-    "closed",
-  );
+  const menuSrc = sections_button.children[0].src
+  menuSrc.src = menuSrc.replace("opened", "closed");
   sections_menu.style.display = "none";
 }
 
 function openMenu() {
   sections_button.setAttribute("opened", "true");
-  sections_button.children[0].src = sections_button.children[0].src.replace(
-    "closed",
-    "opened",
-  );
+  menuSrc = menuSrc.replace("closed", "opened");
   sections_menu.style.display = "flex";
   sections_menu.style.flexDirection = "column";
 }
 
-sections_button.addEventListener("click", () => {
-  if (sections_button.getAttribute("opened") === "false") {
-    openMenu();
-  } else {
-    closeMenu();
-  }
-});
-
-window.addEventListener("resize", () => {
-  if (sections_button.getAttribute("opened") === "true") {
-    closeMenu();
-  }
-});
-
-main.addEventListener("click", () => {
-  if (sections_button.getAttribute("opened") === "true") {
-    closeMenu();
-  }
+/* Listeners */
+
+sections_button.addEventListener("click", () => isMenuOpen ? closeMenu() : openMenu());
+window.addEventListener("resize", () => isMenuOpen && closeMenu());
+main.addEventListener("click", () => isMenuOpen && closeMenu());
+
+theme_switcher.addEventListener("click", () => {
+  const title = theme_switcher.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();