Переключатель на темную тему

640
.
Windler
NaN is number
Добавлено: 17.05.2022 / 11:53
Для изменения в объект divs необходимо добавить ключ в объект, ключ принимает все тоже самое, что и CSS (.divs, #id, html и т.д) и чередовать несколько, через запятую (.div1, .div2)
for example:

'body': {
   'background-color': 'orange',
   'color': 'yellow'
}


В примере выше мы берем body и меняем ему background-color на orange, а color меняем на yellow.
Основные классы и элементы уже прописаны в объекте, но можете заменить на свои.
Порядок установки:
1. Архив распаковать в корень 
2.  Подключить файл стилей для иконки и файл скрипта в /themes/default/templates/system/layout/default.phtml

<link rel="stylesheet" href="<?= $this->asset('css/moon.css', true) ?>">
<script src="<?= $this->asset('js/moon.js', true) ?>"></script>


Подключайте после всех стилей, в дефолтном шаблоне это на ~42 строке.

3. Кнопку для переключения нужно добавить после кнопки скрола, в том же дефолтном шаблоне это строка ~116 то есть после закрытия дива "<div class="to-top to-top_hidden">". Добавить нужно:

<div class="moon-button moon">
   <button class="btn">
      <img src="<?= $this->asset('icons/moon.svg') ?>" alt="moon">
   </button>
</div>


Всегда актуальная версия по этой ссылке
.
NaN is number
moon.js
Прикрепленные файлы:
.
NaN is number
Проверял все на JohnCMS 9.6. На других версиях может криво работать, или не работать вовсе.
Прикрепленные файлы:
.
¯\_(ツ)_/¯
Наконец то кто то сделал) 
.
NaN is number
# PaRtiZzaN (19.05.2022 / 11:15)
Наконец то кто то сделал) 
будет не лень, допилю нормально и красиво, а то сейчас как-то прям совсем простенько
.
Let Mortal Kombat begin
Windler, допиливай и цвета алертов, кнопок и т.д. Хоть кто-то за тёмную тему взялся
.
<?php exit;
А может кто это переписать на подключение css файла?) Я просто в js не силен
.
NaN is number
Так, тут ничего нового, просто добавляет иконку рядом с иконкой скрола и чуток файлы упорядочил.
И поправил инструкцию по установке.
Прикрепленные файлы:
.
NaN is number
Скриншот
Прикрепленные файлы:
.
NaN is number
# galtsev.t (01.06.2022 / 06:42)
А может кто это переписать на подключение css файла?) Я просто в js не силен
Скачай новую версию, так же ознакомься с новой обновленной инструкцией.
Если что-то не получится, напиши - разберемся)
Всего: 20