флажок не изменяющий переменную при деактивации

Question

У меня есть флажок, который разработан как выключатель в CSS. Когда я активирую этот переключатель, запускается скрипт, который включает vaible и устанавливает его в тело. Когда я пытаюсь отключить его, ничего не происходит, кроме переключателя, перемещающегося в положение oof

script:

    function checkDarkMode () {
    if (localStorage.darkMode) {
        document.body.classList.add("dark-mode");
    } else {
        document.body.classList.remove("dark-mode");
    }
}

    function toggleDarkMode () {
        localStorage.darkMode = !(localStorage.darkMode);
        checkDarkMode();
    }

HTML код переключателя:

<div class="onoffswitch" style="position: fixed;left: 88%;top: 4%;">
    <input
    type="checkbox"
    name="onoffswitch"
    id="myonoffswitch"
    class="onoffswitch-checkbox"
    onclick="toggleDarkMode()"
    />
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

У меня возникли две проблемы с этим переключателем. Когда я деактивирую этот переключатель, рычаг переместится в выключенное положение, но скрипт не будет запущен или даже не удалит class='dark-mode' из тела страницы.

Вторая проблема это когда я go перехожу на другую страницу с гиперссылкой, ведьма не находится во включенном положении, если скрипт запускался на другой странице. Но тема темного режима применяется к странице. Как бы я мог получить скрипт для запуска и деактивировать тему темного режима из тела. Есть ли способ применить ту же переменную, которая использовалась в скрипте, для активации и деактивации режима dar для фактического переключателя, чтобы он мог проверить, должен ли переключатель находиться во включенном или выключенном положении на страницах.