Как сохранять темную тему при переходе на разные страницы сайта?

Question

[FrikmanTo]

Сделал простую темную тему - поменял классы у нужных элементов. Проблема в том, что при открывании/закрывании разных модалок и прочего -- у них сбрасываются классы. Как избежать этого?

мой код а-ля "нажата картинка -- поменяй класс"

let darkTheme = function() {
    let darkPic = document.querySelector('.black');
    let lightPic = document.querySelector('.light-theme');

let header = document.querySelector('header');
let content = document.querySelector('.content');

darkPic.onclick = function() {
        lightPic.classList.toggle('hidden');
        darkPic.classList.toggle('hidden');
    }

lightPic.onclick = function() {
        lightPic.classList.toggle('hidden');
        darkPic.classList.toggle('hidden');
    }

if(!lightPic.classList.contains('hidden')) {
        header.classList.toggle('dark-theme');
        content.classList.toggle('dark-theme');
}

if(lightPic.classList.contains('hidden')) {
       header.classList.toggle('dark-theme');
        content.classList.toggle('dark-theme');
}

Comments

[Hanneman]

Без анализа вашего кода вряд ли кто-то сможет дать адекватный совет.

[Пашенька]

Сохранить значение в localStorage.

[FrikmanTo]

Hanneman, добавил код

[FrikmanTo]

Пашенька, а можете, пожалуйста, на примере моего кода показать как его применить? не совсем понятно что делать

[Пашенька]

FrikmanTo, я на мобиле. Всё просто- сохранять значения в localStorage, при загрузке страницы проверять, есть ли значение в localStorage, и если есть, то устанавливать цветовую схему в соответствии с ним, если нет, то ничего не делать.