CSS & JS splitting, small fix section badge

1 files changed, 32 insertions, 0 deletions

diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 0000000..36896c9
--- /dev/null
+++ b/assets/js/theme.js
@@ -0,0 +1,32 @@
+/* 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); // display handled by CSS
+    }
+
+    // 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);
+     });
+}
+
+export default initThemeToggle;
+