Как сохранять цветовую тему в 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');
			}
		})

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

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

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 133 просмотра
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 151 просмотр
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- вчера
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 47 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 39 просмотров
0

ответов
JavaScript

Простой
Как обойти контроль просмотра видео на сайте образовательного ресурса?
- 1 подписчик
- 19 нояб.
- 135 просмотров
3

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Телеграм бот

22 нояб. 2024, в 02:56

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

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

22 нояб. 2024, в 00:55

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

Разработка алгоритма на python (Data engineering)

21 нояб. 2024, в 23:30

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

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?

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

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

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