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

Максимальный · 23 декабря, 2023

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

Максимальный · 24 декабря, 2023

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

Отредактировано 24 декабря, 2023 пользователем DEST

Максимальный · 24 декабря, 2023

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

switch.zip

Максимальный · 24 декабря, 2023

по идее так

Спойлер


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

Максимальный · 24 декабря, 2023

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

Максимальный · 25 декабря, 2023

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

Максимальный · 25 декабря, 2023

Решено!

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

<body>

Заменил на

<body class="dark">

Отредактировано 25 декабря, 2023 пользователем Shakoladka

Войти

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

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

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

Ссылка на сообщение

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

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

Ссылка на сообщение

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

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

Ссылка на сообщение

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

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

Ссылка на сообщение

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

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

Ссылка на сообщение

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

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

Ссылка на сообщение

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

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

Ссылка на сообщение

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

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

Маркет