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

Question

Евгений Лежепеков @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');
			}
		})

Вопрос задан более двух лет назад
1153 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Решения вопроса 1

3 комментария

Евгений Лежепеков @ELegek Автор вопроса
О спасибо, запоминать и подставлять темную и светлую тему получилось. Осталось решить вопрос с запоминанием акцентного цвета, дело в том что в скрипте темы я использую классы, а в акцентном цвете я подставляю свойство background. И я не могу сообразить что мне нужно подставить в ls чтобы он запоминал какой стоит rgba(цвет) и как его применить

<div class="colors"> </div>

let colors = document.querySelectorAll('.color'); colors.forEach(color =>{ color.addEventListener('click', () => { let background = color.style.background; document.querySelector(':root').style.setProperty('--skin-color', background); localStorage.setItem(color,document.querySelector(':root').style.setProperty('--skin-color', background)); }) });
Написано более двух лет назад

Сергей delphinpro @delphinpro Куратор тега JavaScript

Евгений Лежепеков, всё так же.

<body>
<script>
    const color = localStorage.getItem('skin-color');
    if (color != null)
        document.documentElement.style.setProperty('--skin-color', color);
</script>

function setColor(color) {
    document.documentElement.style.setProperty('--skin-color', color);
    localStorage.setItem('skin-color', color);
}

<button onclick="setColor('red')">red</button>
<button onclick="setColor('#1fc586')">#1fc586</button>

Написано более двух лет назад

Евгений Лежепеков @ELegek Автор вопроса

Спасибо большое, очень помогли!

Написано более двух лет назад

Пригласить эксперта

Ответы на вопрос 2

6 комментариев

Комментировать

Ваш ответ на вопрос

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

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 11 часов назад
- 74 просмотра
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 77 просмотров
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 936 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 51 просмотр
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 83 просмотра
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 95 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 206 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 100 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 91 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Какие есть высокоуровневые компонентные javascript фреймворки?
- 1 подписчик
- 19 дек.
- 171 просмотр
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Расшифровать требуемые параметры из CAN-шины авто Chery Tiggo 7 Pro

23 дек. 2024, в 00:27

20000 руб./за проект

Отправка команды на (раз)блокировку двигателя Chery Tiggo 7 Pro

23 дек. 2024, в 00:15

20000 руб./за проект

Answer 1 · 2022-06-12 20:55:36

Я делал следующим образом.

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

: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');
}

Answer 2 · 2022-06-12 20:45:16

при действии пользователя — сохранять в LS выбранное.
при загрузке страницы — брать значение из LS или если-пусто, подставлять значение по-умолчанию.
Что именно вызывает ступор?

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

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

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

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

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

Песочница

Answer 3 · 2022-06-12 20:42:57

Сохраните в локалку элемент.style.background. а потом через гет элемент выводите его в стили элемента вот так: элемент.style.background = localStorage.getElement("Название локалки(выведет значение)") если неправильно понял, пишите, разберемся

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

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

Минуточку внимания

Войдите на сайт