const themeToggle = document.getElementById("theme");
let userPreference = getUserPreference();

setAppliedMode(getAppliedMode(userPreference));

themeToggle.addEventListener("click", togglePreference, false)

function getUserPreference() {
    return localStorage.getItem("theme") || "light";
}

function saveUserPreference(userPreference) {
    localStorage.setItem("theme", userPreference);
}

function getAppliedMode(userPreference) {
    if (userPreference === "light") {
        return "light";
    }
    if (userPreference === "dark") {
        return "dark";
    }
    if (matchMedia("(prefers-color-scheme: light)").matches) {
        return "light";
    }
    return "dark";
}

function setAppliedMode(mode) {
    document.documentElement.dataset.appliedMode = mode;
    themeToggle.checked = getAppliedMode(userPreference) === "dark";
}

function togglePreference() {
    if (userPreference === "light") {
        userPreference = "dark";
    } else if (userPreference === "dark") {
        userPreference = "light";
    }
    saveUserPreference(userPreference);
    setAppliedMode(getAppliedMode(userPreference));
}