Переключения шаблона на темный

В теме 7 сообщений

Shakoladka Великий Гуру 356

Великий Гуру

День добрый! Есть шаблон DLE  по кнопочке переключается шаблон с светлого, на темный, вопрос? Как сделать что бы было наоборот переключался с темного на светлый, или как убрать светлый шаблон и сделать только темный.

Приложу сюда код HTML, и еще файл css, обьясните пожалуйста как это делается

Заранее спасибо всем большое!

Сама кнопка переключения шаблона с светлого, на темный 


<div class="navbar-right ml-auto">

      <div class="theme-switch-wrapper">
        <label class="theme-switch" for="checkbox">
          <input type="checkbox" id="checkbox" />
          <div class="slider round"></div>
        </label>
      </div>

style.zip

0

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

DEST

DEST Maintainer 1 034

Maintainer

Это делается через JS, нужно поискать js-код, который работает с #checkbox, или .theme-switch

Отредактировано пользователем DEST

2

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

DEST

DEST Maintainer 1 034

Maintainer

по идее так

Спойлер 

 /* -----------------------------------
           dark-mode
    ----------------------------------- */
    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
    const logoDark = document.querySelector('.logo-dark');
    const logoWhite = document.querySelector('.logo-white');
    const currentTheme = localStorage.getItem('theme');

    if (currentTheme) {
        document.documentElement.setAttribute('data-theme', currentTheme);

        if (currentTheme === 'light') {
            toggleSwitch.checked = true;
            document.body.classList.toggle("light");
            logoDark.classList.add('display-none');
            logoWhite.classList.add('display-block'); 
        }
    }

    function switchTheme(e) {
        if (!e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
            document.body.classList.add('dark');
            logoDark.classList.add('display-none');
            logoWhite.classList.add('display-block');  
        }
        else {
            document.documentElement.setAttribute('data-theme', 'light');
            localStorage.setItem('theme', 'light');
            document.body.classList.remove('dark');
            logoDark.classList.remove('display-none');
            logoWhite.classList.remove('display-block');
        }
    }

    toggleSwitch.addEventListener('change', switchTheme, false);

 

 

1

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Shakoladka Великий Гуру 356

Великий Гуру

@DEST Если очистить историю браузера, и зайти на сайт как в первый посетитель, шаблон получается все ровно светлый, но так все работает если 2 раза по кнопке поменять шаблон. Местами по кнопке он поменялся как нужно, но только все ровно при первом заходе светлый, что бы наглядно было понятно могу оставить ссылку для демонстрации если нужно

0

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

DEST

DEST Maintainer 1 034

Maintainer

скорее всего нужно где-то в html коде шаблона поменять, там должен быть текст, что-то типа data-theme, либо CSS-класс light. Его надо заменить на dark

1

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Shakoladka Великий Гуру 356

Великий Гуру

Решено!

Сделал так в главном HTML шаблоне: 

<body>

Заменил на 

<body class="dark">

Отредактировано пользователем Shakoladka

1

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты
Эта тема закрыта для публикации ответов.
Перейти к списку тем PHP / HTML / CSS

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу