theme-script.js

/**
 * On page load:
 */

/**
 * 1. Grab what we need from the DOM and system settings on page load
 */
document.addEventListener("DOMContentLoaded", () => {
    const button = document.querySelector("[data-theme-toggle]");
    const localStorageTheme = localStorage.getItem("theme");
    const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");

    /**
     * 2. Work out the current site settings
     */
    let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });

    /**
     * 3. Update the theme setting and button text according to current settings
     */
    updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
    updateThemeOnHtmlEl({ theme: currentThemeSetting });

    /**
     * 4. Add an event listener to toggle the theme
     */
    button.addEventListener("click", (event) => {
        const newTheme = currentThemeSetting === "dark" ? "light" : "dark";

        localStorage.setItem("theme", newTheme);
        updateButton({ buttonEl: button, isDark: newTheme === "dark" });
        updateThemeOnHtmlEl({ theme: newTheme });

        currentThemeSetting = newTheme;
    });

    button.addEventListener("mouseover", () => {
        const hoverCta = currentThemeSetting === "dark" ? "☀️" : "🌚";
        button.setAttribute("aria-label", hoverCta);
        button.innerText = hoverCta;
    });

    button.addEventListener("mouseout", () => {
        updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
    });
});

/**
 * Utility function to calculate the current theme setting.
 * Look for a local storage value.
 * Fall back to system setting.
 * Fall back to light mode.
 */
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
    if (localStorageTheme !== null) {
        return localStorageTheme;
    }

    if (systemSettingDark.matches) {
        return "dark";
    }

    return "light";
}

/**
 * Utility function to update the button text and aria-label.
 */
function updateButton({ buttonEl, isDark }) {
    const newCta = isDark ? "🌚" : "☀️";
    const newAlt = isDark ? "Light Mode" : "Dark Mode";
    // use an aria-label if you are omitting text on the button
    // and using a sun/moon icon, for example
    buttonEl.setAttribute("aria-label", newCta);
    buttonEl.innerText = newCta;
    buttonEl.setAttribute("title", newAlt);
}


/**
 * Utility function to update the theme setting on the html tag
 */
function updateThemeOnHtmlEl({ theme }) {
    document.documentElement.setAttribute("data-theme", theme);
}