Elite-Board tech support
https://forum.illusionweb.ru/

Темная тема оформления, прошу помощи с js
https://forum.illusionweb.ru/viewtopic.php?f=3&t=5109		 Страница 1 из 1
Автор:  Anton [ 20 ноя 2022, 13:05 ]
Заголовок сообщения:  Темная тема оформления, прошу помощи с js
Добрый день, друзья!

Решил попытаться сделать своими силами переключение темной темы на сайте.
Делал с помощью js и css.
В виде переключателя решил использовать чекбокс.
В js не соображаю, по этому гуглил готовый код.

CSS
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.


HTML
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.


JS
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.


Беда в том, что стиль переключается.
Состояние чекбокса при перезагрузке страницы сохраняется, а вот выбранное черное оформление [dark] - нет.
Гуглить пробовал, но либо не то что мне нужно, либо сильно сложно.
Прошу вашей помощи.
Автор:  Иван [ 21 ноя 2022, 00:17 ]
Заголовок сообщения:  Re: Темная тема оформления, прошу помощи с js
Привет

Я бы сделал вот так:
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.



Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.
Автор:  Anton [ 21 ноя 2022, 18:19 ]
Заголовок сообщения:  Re: Темная тема оформления, прошу помощи с js
Вчера пока ждал помощи - сидел пробовал варианты и один сработал :-).
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.

В принципе тоже что ты предложил. А вот все остальное у тебя по симпатичнее смотрится нежели у меня). Поставил твой - все работает. Спасибо, низкий поклон ;-)!

Теперь решаю вопрос со сменой логотипа на черную версию. Лого у меня svg, вставлен через тег <img>. Мог бы сделать через background-image, а потом менять в css. Но хочется сохранить тег <img>, как никак логотип :-).


До смены кода на твой было так:
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.


Переключение лого работает, но опять же не сохраняется, а в localStorage.getItem не знаю что прописать, пробовал разные варианты методом сопоставления и подбора, но не вышло. И как мне подсказывает внутреннее чутье - способ "костыль". Путь до лого повторяется не один раз. Копаю дальше.
Еще раз спасибо!
Автор:  Иван [ 21 ноя 2022, 19:51 ]
Заголовок сообщения:  Re: Темная тема оформления, прошу помощи с js
Anton писал(а):
Переключение лого работает, но опять же не сохраняется, а в localStorage.getItem не знаю что прописать, пробовал разные варианты методом сопоставления и подбора, но не вышло. И как мне подсказывает внутреннее чутье - способ "костыль". Путь до лого повторяется не один раз. Копаю дальше.
Еще раз спасибо!


Во-первых:
У 2-х разных элементов, на 1 странице не нужно делать одинаковые ID, Я про switch-color, который и на чекбоксе и на логотипе.
Смени ID логотипа например на site-logo.
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.

И юзай вот так:
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.
Автор:  Anton [ 22 ноя 2022, 10:57 ]
Заголовок сообщения:  Re: Темная тема оформления, прошу помощи с js
Попробовал поюзать, все отвалилось, стили не переключаются и лого тоже, положение чекбокса не сохраняется (
Автор:  Anton [ 22 ноя 2022, 12:32 ]
Заголовок сообщения:  Re: Темная тема оформления, прошу помощи с js
upd.
Преблема была в том, что я решил скрипт вставить выше разметки чекбокса и логотипа. до этого скрипт был прописан сразу после чекбокса, для того, чтобы при перезагрузке страницы энейбл чекбокса сразу подгрузился.
Сейчас скрипт прописан в футере, и при перезагрузке страницы, если выбрана черная тема, чекбокс на мгновение дисэйбл, а когда браузер считает всю страницу - энейбл. Очень бросается в глаза. А так скрипт коротеньки и решает все задачи. Иван, браво!
Автор:  Иван [ 22 ноя 2022, 13:15 ]
Заголовок сообщения:  Re: Темная тема оформления, прошу помощи с js
Anton писал(а):
upd.
Преблема была в том, что я решил скрипт вставить выше разметки чекбокса и логотипа. до этого скрипт был прописан сразу после чекбокса, для того, чтобы при перезагрузке страницы энейбл чекбокса сразу подгрузился.
Сейчас скрипт прописан в футере, и при перезагрузке страницы, если выбрана черная тема, чекбокс на мгновение дисэйбл, а когда браузер считает всю страницу - энейбл. Очень бросается в глаза. А так скрипт коротеньки и решает все задачи. Иван, браво!


Самый простой вариант избавиться от "дерганий", и чекбокса и цветов, пиши данные не в local storage а в куки.
И считывай куки через smarty
Автор:  Anton [ 25 ноя 2022, 18:58 ]
Заголовок сообщения:  Re: Темная тема оформления, прошу помощи с js
Печенье оказалось мне не по зубам)))

Пока решил остановиться на том, что браузер автоматически выбирает тему в зависимости от системной. Лого вывел через задник в CSS.
Вот такое решение.
Код:
Для просмотра Вы должны быть в группе пользователей Elite-Board.
Страница 1 из 1 Часовой пояс: UTC + 3 часа
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/