Language selection & theme toggle

1 files changed, 38 insertions, 0 deletions

diff --git a/assets/js/main.js b/assets/js/main.js
index e69de29..c3218f1 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -0,0 +1,38 @@
+(function () {
+    "use strict";
+
+    // TOGGLE DARK/LIGHT MODE
+    function initThemeToggle() {
+        const rootHtml = document.documentElement;
+        const toggleThemeBtn = document.getElementById("theme-toggle");
+
+        // If no saved theme, determine user preference, otherwise default to light
+        const savedTheme = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const initialTheme = savedTheme ?? (prefersDark ? "dark" : "light");
+
+        function setTheme(theme) {
+            const isDarkMode = theme === "dark";
+            // toggleThemeBtn dataset comes with translated labels for site's language
+            const label = isDarkMode ? toggleThemeBtn.dataset.labelLight : toggleThemeBtn.dataset.labelDark;
+
+            rootHtml.setAttribute("data-theme", theme);
+            toggleThemeBtn.setAttribute("aria-label", label);
+            toggleThemeBtn.querySelector(".icon-moon").style.display = isDarkMode ? "none" : "block";
+            toggleThemeBtn.querySelector(".icon-sun").style.display = isDarkMode ? "block" : "none";
+        }
+
+        // Apply initial theme
+        setTheme(initialTheme);
+
+        // Change theme on click and save user's choice
+        toggleThemeBtn.addEventListener("click", () => {
+            const newTheme = rootHtml.getAttribute("data-theme") === "dark" ? "light" : "dark";
+            setTheme(newTheme);
+            localStorage.setItem("theme", newTheme);
+        });
+    }
+
+    initThemeToggle();
+})();
+