Форум техподдержки Elite-Board

Добрый день, друзья!

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

CSS


HTML


JS


Беда в том, что стиль переключается.
Состояние чекбокса при перезагрузке страницы сохраняется, а вот выбранное черное оформление [dark] - нет.
Гуглить пробовал, но либо не то что мне нужно, либо сильно сложно.
Прошу вашей помощи.

Привет

Я бы сделал вот так:

Вчера пока ждал помощи - сидел пробовал варианты и один сработал .

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

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


До смены кода на твой было так:


Переключение лого работает, но опять же не сохраняется, а в localStorage.getItem не знаю что прописать, пробовал разные варианты методом сопоставления и подбора, но не вышло. И как мне подсказывает внутреннее чутье - способ "костыль". Путь до лого повторяется не один раз. Копаю дальше.
Еще раз спасибо!

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

И юзай вот так:

Попробовал поюзать, все отвалилось, стили не переключаются и лого тоже, положение чекбокса не сохраняется (

upd.
Преблема была в том, что я решил скрипт вставить выше разметки чекбокса и логотипа. до этого скрипт был прописан сразу после чекбокса, для того, чтобы при перезагрузке страницы энейбл чекбокса сразу подгрузился.
Сейчас скрипт прописан в футере, и при перезагрузке страницы, если выбрана черная тема, чекбокс на мгновение дисэйбл, а когда браузер считает всю страницу - энейбл. Очень бросается в глаза. А так скрипт коротеньки и решает все задачи. Иван, браво!

Самый простой вариант избавиться от "дерганий", и чекбокса и цветов, пиши данные не в local storage а в куки.
И считывай куки через smarty

Печенье оказалось мне не по зубам)))

Пока решил остановиться на том, что браузер автоматически выбирает тему в зависимости от системной. Лого вывел через задник в CSS.
Вот такое решение.