Cookie не удаляется или изменяется

Question

Я работал над сайтом, который инструктирует моих коллег о том, как использовать многие функции настройки и программное обеспечение на их устройствах под управлением Windows 10.

Я пытаюсь добавить темную тему на сайт,и большая часть работы там есть, но у меня возникают проблемы с использованием файлов cookie, чтобы выбор темы сохранялся на всем веб-сайте и в нескольких сеансах.Моя проблема заключается в том, что при посещении веб-страницы добавляется файл cookie для включения темной темы, но изначально не должно быть файлов cookie.

Мое намерение состоит в том, чтобы на веб-сайте по умолчанию использовалась светлая тема, если для темноты нет файла cookie.тема.Кроме того, если есть файл cookie для темной темы, когда пользователь нажимает кнопку для светлой темы, файл cookie для темной темы должен быть удален.

В процессе создания этого веб-сайта у меня естьЯ многому научился, но я был озадачен этой проблемой.Что я делаю не так, что файл cookie застрял как theme=dark?

Скрипт для восстановления темы при загрузке страницы:

function restoreTheme(){
    if(document.cookie="theme=dark") {
        darkTheme();
    } else {
        lightTheme();
    }
}

Скрипт для изменения темы:

function darkTheme() {
        document.body.style.setProperty("--sideNavBackground", "rgb(33,33,33)");
        document.body.style.setProperty("--bodyBackgroundColor", "rgb(17,17,17)");
        document.body.style.setProperty("--sideNavItemBackgroundHover", "rgb(64,64,64)");
        document.body.style.setProperty("--bodyTextColor", "rgb(238,238,238)");
        document.cookie="theme=dark";
        document.cookie = "theme=light; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }
    function lightTheme() {
        document.body.style.setProperty("--sideNavBackground", "rgb(230,230,230)");
        document.body.style.setProperty("--bodyBackgroundColor", "rgb(255,255,255)");
        document.body.style.setProperty("--sideNavItemBackgroundHover", "rgb(199,199,199)");
        document.body.style.setProperty("--bodyTextColor", "rgb(17,17,17)");
        document.cookie="theme=light";
        document.cookie = "theme=dark; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

    }

Кнопки для смены темы:

<form>
        <input name="theme" type="submit" class="theme_b" id="dark" onclick="darkTheme()" value="Dark Theme">
        <input name="theme" type="submit" class="theme_b" id="light" onclick="lightTheme()" value="Light Theme">
    </form>

Для справки приведен кодовый блок (в основном) полной страницы: https://codepen.io/jackemery2001/pen/LrPvEJ/

Answer 1

Используя предложения @Erich Brahmin и @CBroe, я смог исправить проблему.

Я изменил function restoreTheme() на

function restoreTheme() {
        var theme = getCookie("theme");
        if (theme=="dark") {
            //alert("dark");
            darkTheme();
        } else {
            //alert("light");
            lightTheme();
        }
    }

и добавил скрипт в головуfor getCookie ():

function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

Простое изменение document.cookie = "theme = dark" на document.cookie == "theme = dark" не было полностью эффективным, поскольку оно работало только в том случае, если не было других файлов cookie..

function restoreTheme(){
if(document.cookie="theme=dark") {
    darkTheme();
} else {
    lightTheme();
}

Рабочее исправление можно увидеть на https://codepen.io/jackemery2001/pen/LrPvEJ

Answer 2

Упс!

function restoreTheme(){
if(document.cookie="theme=dark") {
    darkTheme();
} else {
    lightTheme();
}

}

document.cookie = "theme = dark" необходимо изменить на document.cookie == "theme = dark"