Постоянная темная тема. Как сделать?

Question

[LareMoon]

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

Ссылка на сайт:
https://indexzerozzz.github.io/bonbon_tg/

Answer 1

[Александр]

В раздел head:

+ function applyTheme() {
+     const isDark = (localStorage.getItem('is-dark-theme') ?? 'true') === 'true';
+     if (isDark) {
+         document.body.classList.remove('light-mode');
+         document.body.classList.add('dark-mode');
+     } else {
+         document.body.classList.remove('dark-mode');
+         document.body.classList.add('light-mode');
+     }
+ }

- var dark = true;
function themeChange() {
-     var element = document.body;
- 
-     if (dark == true) {
-         element.classList.remove("dark-mode");
-         element.classList.add("light-mode");
-         dark = false;
-     }
- 
-     else {
-         element.classList.remove("light-mode");
-         element.classList.add("dark-mode");
-         dark = true;
-     }
+     localStorage.setItem('is-dark-theme', !((localStorage.getItem('is-dark-theme') ?? 'true') === 'true'));
+     applyTheme();
}

+ window.addEventListener('DOMContentLoaded', function () {
+     applyTheme();
+ });

Comments

[LareMoon]

работает так же как и было

[Александр]

IndexZeroLz, Не вижу, что Вы обновили файл. Либо убирайте локально theme.js когда проверяете.

[LareMoon]

Александр, Забыл обновить. Сейчас обновлю.

[Александр]

IndexZeroLz,

+ window.addEventListener('DOMContentLoaded', function () {
+     applyTheme();
+ });

дополнял, возможно не увидели.

Answer 2

[Evgeniy]

В куки запиши по умолчанию белый цвет. Если пользователь изменит цвет то в куках цвет изменится на чёрный. Думаю, таким образом получится решить)