assets/js/main.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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();
})();