Sign in to follow this  
Followers 0

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

Started by Shakoladka ,

7 posts in this topic

Posted · Report post

День добрый! Есть шаблон 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

Share this post

Link to post
Share on other sites

Posted (edited) · Report post

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

Edited by DEST

2

Share this post

Link to post
Share on other sites

TS Posted · Report post

@DEST Нашел у себя вот такой JS

switch.zip

0

Share this post

Link to post
Share on other sites

Posted · Report post

по идее так

Спойлер 

 /* -----------------------------------
           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

Share this post

Link to post
Share on other sites

TS Posted · Report post

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

0

Share this post

Link to post
Share on other sites

Posted · Report post

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

1

Share this post

Link to post
Share on other sites

TS Posted (edited) · Report post

Решено!

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

<body>

Заменил на 

<body class="dark">

Edited by Shakoladka

1

Share this post

Link to post
Share on other sites
This topic is now closed to further replies.
Sign in to follow this  
Followers 0
Go To Topic Listing PHP / HTML / CSS

  • Recently Browsing   0 members

    No registered users viewing this page.