Задать вопрос
@ELegek
иду к цели стать веб-разработчиком
javascript

Как сохранять цветовую тему в localstorage?

Как сохранить измененный цвет в localstorage чтобы после перезагрузки сайта цвет сохранялся?

<div class="colors">
			<span class="color" style="background: #fb839e"></span>
			<span class="color" style="background: #ec9412"></span>
			<span class="color" style="background: #1fc586"></span>
			<span class="color" style="background: #2eb1ed"></span>
			<span class="color" style="background: #cc3a3b"></span>
		</div>

:root {
  --skin-color: #2eb1ed;
}

// ------------------------ theme colors ---------------------------

	let colors = document.querySelectorAll('.color');

		colors.forEach(color =>{

			color.addEventListener('click', () => {
				let background = color.style.background;
				document.querySelector(':root').style.setProperty('--skin-color', background);
				
			})

			
		});

	// --------------------- theme ligth and dark mode ---------------------

	const dayNight = document.querySelector('.day-night');


		dayNight.addEventListener('click', () => {
			dayNight.querySelector('i').classList.toggle('fa-sun');
			dayNight.querySelector('i').classList.toggle('fa-moon');
			document.body.classList.toggle('dark');
		});
	
		window.addEventListener('load', () => {
			if (document.body.classList.contains('dark')) {
				dayNight.querySelector('i').classList.add('fa-sun');
			} else {
				dayNight.querySelector('i').classList.add('fa-moon');
			}
		})
  • Вопрос задан
  • 998 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Я делал следующим образом.

Набор переменных для темы по умолчанию:

:root {
  --color1: white;
}


Переопределения переменных для темной темы:

body.dark {
  --color1: black;
}


В шаблоне страницы (именно там, для предотвращения "мерцания" при загрузке страницы) читаем тему из локального хранилища:

<body>
<script>
    if (localStorage.getItem('theme') === 'dark') document.body.classList.add('dark');
</script>


Кнопка для переключения темы:

<li class="nav-item theme-switcher-outer">
    <a class="nav-link theme-switcher" href="javascript:switchTheme()">
        <i class="fa fa-sun theme-switcher__light"></i>
        <i class="fa fa-moon theme-switcher__dark"></i>
    </a>
</li>


Стили для переключения иконки в кнопке:

.theme-switcher {
    &__light { display: none; }
    &__dark { }

    body.dark & {
        &__light { display: inline; }
        &__dark { display: none; }
    }
}


И сама функция переключения:

function switchTheme() {
    document.body.classList.toggle('dark');
    localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
}
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
при действии пользователя — сохранять в LS выбранное.
при загрузке страницы — брать значение из LS или если-пусто, подставлять значение по-умолчанию.
Что именно вызывает ступор?

Пока там только две настройки: выбранный цвет и день/ночь. Я бы предложил хранить их в виде JSON под одним ключом localStorage. В одном объекте.

Вообще, сделал бы объект Настроек центром всей затеи )
В начале берётся или сохранённый в LS, или с дефолтными значениями.
С помощью Proxy (обёртки) этого объекта, любое изменение любой из настроек сразу сохраняет весь объект в LS и применяет все эти настройки.

Есть функция, которая получает на вход объект Настроек, и все везде отрисовывает как надо.

Когда юзер выбирает цвет, день-ночь, или добавите что-то ещё – это действие только меняет настройку в проксированном объекте Настроек. Хитрость в том, что этот объект не простой, а Proxy-обёртка, которая реагирует на каждое изменение: сохраняет его в LS и отрисовывает.

p.s. да и одинаковые квадраты делать в статичной разметке некруто. Заменил на массив цветов и программную отрисовку одинаковых элементов.


Песочница
Ответ написан
6 комментариев
6 комментариев
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Сохраните в локалку элемент.style.background. а потом через гет элемент выводите его в стили элемента вот так: элемент.style.background = localStorage.getElement("Название локалки(выведет значение)") если неправильно понял, пишите, разберемся
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Фронт мобильное приложение
25 апр. 2024, в 10:42
150000 руб./за проект
Настроить вёрстку webapp-telegram
25 апр. 2024, в 10:41
2000 руб./за проект
Создать дудл - видео с AI аватаром
25 апр. 2024, в 10:25
2000 руб./за проект
Ещё заказы