Переключение темы с запоминанием выбора?

Question

[Rebldomakr]

const theme = document.querySelector(':root');
const btns = document.querySelectorAll('.colors');

btns.forEach(function(btn){

    btn.addEventListener("click", function(e){

        const color = e.currentTarget.classList;

        if(color.contains("green")){
            theme.style.setProperty("--color", "#47A846");
        }
        else if(color.contains("grey")){
            theme.style.setProperty("--color", "#6C757D");
        }
        else{
            theme.style.setProperty("--color", "#F26B38");
        }
    });
});

У меня есть список цветов, при клике она меняет цвет текста, ховера и тд на сайте. Но при перезагрузке, или при переходе на другую страницу цвета которые я выбрал не сохраняются. Вроде как она делается с помощью localStorage но я особо не шарю в этом. Сам сайт: Тык

Comments

[edward_freedom]

шарь
https://developer.mozilla.org/ru/docs/Web/API/Wind...

[Rebldomakr]

edward_freedom, Та я уже читаю просто не доходит, просто задал тут вопрос думал подскажут что и как

[edward_freedom]

Rebldomakr, так тут подсказывать нечего
localStorage.setItem('myCat', 'Tom');
записываешь
let cat = localStorage.getItem('myCat');
считываешь

if(cat === 'dark') {
//устанавливаешь одну темы
}
else {
//устанавливаешь другую 
}

Answer 1

[Иван]

Можно попробовать так :)

const theme = document.querySelector(':root');
const btns = document.querySelectorAll('.colors');

setColor('color', '#fff');

	function setColor(color, value) {
		if (localStorage.getItem(color)) {
			theme.style.setProperty("--color", `${localStorage.getItem(color)}`);
		} else {
			theme.style.setProperty("--color", value);
			localStorage.setItem('color', value);
		}
	}

	function getColor(color) {
		theme.style.setProperty("--color", color);
		localStorage.setItem('color', color);
	}
	
	btns.forEach(function(btn){
	
		btn.addEventListener("click", function(e){
	
			const color = e.currentTarget.classList;
	
			if(color.contains("green")){
				getColor('#47A846');
			}

			else if(color.contains("grey")){
				getColor('#6C757D');
			}
			else{
				getColor('#F26B38');
			}
		});
	});

Вот пример с цветом на body:

Comments

[Rebldomakr]

Спасибо, работает :)

[Иван]

Rebldomakr, не за что)