assets/js/theme.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

/* 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 & title for site's language
        const label = isDarkMode ? toggleThemeBtn.dataset.labelLight : toggleThemeBtn.dataset.labelDark;
        const title = isDarkMode ? toggleThemeBtn.dataset.titleLight : toggleThemeBtn.dataset.titleDark;

        rootHtml.setAttribute("data-theme", theme); // display handled by CSS
        toggleThemeBtn.setAttribute("aria-label", label);
        toggleThemeBtn.setAttribute("title", title);
    }

    // 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;