Ночной режим для сайта HTML JS

Question

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

И я сейчас пытался что-то сделать с помощью 'localStorage', но не очень понимаю как это должно работать, так как изменений нет пока что, может кто-то знает как правильно его написать в моем скрипте?

Заранее спасибо!

let moon = document.getElementById("moonA");

var todos;
function toLocal() {
    todos = moon.innerHTML;
    localStorage.setItem('todos', todos);
}

moon.onclick = function () {
    let theme = document.getElementById("glownystyle");
    let photo = document.getElementById("moon");
    if (photo.getAttribute("src") == "sun.svg") {
        theme.href = "glStyle.css";
        photo.src = "moon.svg";
    } else {
        theme.href = "glStyle2.css";
        photo.src = "sun.svg";
    }
    toLocal();
}

if(localStorage.getItem('todos')) {
    List.innerHTML = localStorage.getItem('todos');
}

Answer 1

Как-то так вижу

                //проверяем при загрузке наличие ключа, если первый запуск, то устанавливаем дефолтное значение
                if (!localStorage.getItem('todos')) localStorage.setItem('todos','sun')
                     
                //запускаем функцию смены темы при загрузке страницы
                changeTheme()
                        
                //Функция смены значения в `lcoalStorage`, срабатывает при нажатии вашей кнопки
                let moon = document.getElementById("moonA");
                moon.onclick = function () {
                   if (localStorage.getItem('todos') == 'moon') 
                       localStorage.setItem('todos','sun')
                   else localStorage.setItem('todos','moon')
                   changeTheme()
                }
                                
                //назовите стили `sunStyle.css` и `moonStyle.css`, чтобы сразу подставлять нужные значения.
                //Сама функция смены стилей
                function changeTheme(){            
                   let theme = localStorage.getItem('todos')
                   document.getElementById("glownystyle").href = `${theme}Style.css`
                   document.getElementById("moon").src = `${theme}.svg`
                }

БЛОГ НА HUSL

Ночной режим для сайта HTML JS

Ответы (1 шт):