SignatureCardFrontend/darkmode.js

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

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

function toggleDarkMode() {
    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off;path=/";
    else document.cookie = "darkMode=on;path=/";
    refreshDarkMode();
}

function refreshDarkMode() {
    let darkMode = getCookie("darkMode", "off", "/") === "on";
    if (darkMode) {
        document.body.classList.add("dark-theme");
        document.getElementById("theme").checked = true;
    } else {
        if (document.body.classList.contains("dark-theme")) {
            document.body.classList.remove("dark-theme");
        }
        document.getElementById("theme").checked = false;
    }
}

function getCookie(cookieName, valIfNotExists, path) {
    let cookieArray = document.cookie.split(";");
    for (let i = 0; i < cookieArray.length; i++) {
        let cookie = cookieArray[i].split("=");
        if (cookie[0].trim() === cookieName) {
            return cookie[1];
        }
    }
    console.warn("Cookie \"" + cookieName + "\" does not exist");
    document.cookie = cookieName + "=" + valIfNotExists + ";path=" + path;
    return valIfNotExists;
}