Переключение между тёмной и светлой темой сайта

Бесплатное

Если Вы задаётесь вопросом как сделать альтернативное оформление сайта и всё еще не нашли понятного и простого решения, то это для Вас.

Для начала создадим плагин, назовите как хотите.
В плагине указываете файл, engine/modules/main.php. Затем выберите действие "Найти и добавить ниже".
В строку Найти: вставляем следующий код.
$tpl->set ( '{speedbar}', $tpl->result['speedbar'] );
А в строку добавить ниже:
if( isset($_COOKIE['theme-class']) AND $_COOKIE['theme-class'] == 'dark' ) {
  $theme_class = totranslit($_COOKIE['theme-class']);
} else { $theme_class = ""; }

$tpl->set ( '{theme-class}', $theme_class );

Этот кусок добавит условие на проверку cookie и установленного значения. Если значение установлено как "dark" то глобальный тег {theme-class} примет это значение. А если не установлено или не является нужным то затрётся.

Далее JS функция. Я использую у себя примерно такую.

function changeTheme() {

    if( $('body').hasClass('dark') ) {
        
        $('body').removeClass('dark');
        setcookie('theme-class', 'light');
            
    } else {
            
        $('body').addClass('dark');
        setcookie('theme-class', 'dark');    
            
    }
    
}


Тут при вызове функции проверяется наличие класса у объекта body. Если класс имеется то функция удаляет класс и стирает значение cookie, возвращая стандартный стиль. А если нету, то добавляет и класс и значение куки, которое при обновлении страницы уже будет учитываться.

В шаблонах main.tpl используем {theme-class} в body. А в любом месте сайта размещаем любой элемент и вешаем на него событие, клик, изменение или еще какое. Зависит от того как нужно. 

У себя я использовал checkbox, и событие onchange. В шаблоне разместив код.
<div class="night-mode">
    <label for="night-mode">Тёмное оформление</label>
    <div class="tw-toggle">
    <input type="checkbox" class="checkbox" id="night-mode" onchange="changeTheme();">
    <label for="night-mode"></label>
    </div>        
</div>
В самом input я использовал onchange с вызовом функции каждый раз когда объект изменяется.

Далее стили, тут всё зависит от Вас. Используйте его в правилах стилей, чтобы изменить установленные правила на альтернативные.

В данном примере не учтена установка состояния checkbox это уже додумайте сами.
Пример можно лицезреть прямо тут на сайте, в правом сайдбаре есть переключатель над блоком категорий.
Добавление комментария
  • Отмена
Loading post...
No more posts to load