Как реализовать сохранение темы для сайта?

Question

[syeta_126r]

Приветствую, реализовал на сайте темную тему, с помощью смены классов по кнопке, то есть:
У нас есть:
:root {
--primary-color: #EFEFED;
--secondary-color: #fff;
--text-color: #000;
--fine-color: #DADADA;
--news-color: #FBFBFB;
--donate-image: url(../images/donate/card-icon.svg);
--profile-menu: url(../images/str.png);
}

После нажатия кнопки, данные переменные меняются на:
.dark-mode {
--primary-color: #1f1f1f;
--secondary-color: #303039;
--text-color: #fff;
--fine-color: #303039;
--news-color: #303039;
--donate-image: url(../images/donate/card-icon-white.svg);
--profile-menu: url(../images/str-white.png);
}

То есть, заменяются цвета элементов того класса, на цвета элементов dark-mode класса.

JS:
const toggleIcon = document.querySelector('.toggle-icon');

toggleIcon.addEventListener('click', () => {
toggleIcon.classList.toggle('bx-sun');
document.body.classList.toggle('dark-mode');
});

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

Пытался путем сохранения в localstorage, но ничего не вышло, особо не силён в JS.

Comments

[Модератор]

Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

Answer 1

[historydev]

Answer 2

[Overfinch]

Можно хранить идентификатор темы в куки.
https://developer.mozilla.org/en-US/docs/Web/API/D...