function getUserPreference() {
    return localStorage.getItem('theme') || 'system';
}
function saveUserPreference(userPreference) {
    localStorage.setItem('theme', userPreference);
}
function getAppliedMode(userPreference) {
    if (userPreference === 'light') {
        return 'light';
    }
    if (userPreference === 'dark') {
        return 'dark';
    }
    // system
    if (matchMedia('(prefers-color-scheme: light)').matches) {
        return 'light';
    }
    return 'dark';
}

function setAppliedMode(mode) {
    document.documentElement.dataset.appliedMode = mode;
}

function rotatePreferences(userPreference) {
    if (userPreference === 'system') {
        return 'light'
    }
    if (userPreference === 'light') {
        return 'dark';
    }
    if (userPreference === 'dark') {
        return 'system';
    }
    // for invalid values, just in case
    return 'system';
}

const themeToggler = document.getElementById('theme-toggle');

let userPreference = getUserPreference();
setAppliedMode(getAppliedMode(userPreference));
themeToggler.innerText = userPreference;

themeToggler.onclick = () => {
    const newUserPref = rotatePreferences(userPreference);
    userPreference = newUserPref;
    saveUserPreference(newUserPref);
    themeToggler.innerText = newUserPref;
    setAppliedMode(getAppliedMode(newUserPref));
}