Блог

Я редактирую свою тему tumblr, чтобы включить переключатель темного/светлого режима, и я столкнулся с несколькими проблемами, которые я понятия не имею, как решить. Следующий код-это то, что я поместил в $(документ).готовая(функция(){}) функция.

    var mode = localStorage.getItem('mode');
   var modetoggle = document.getElementById("modetoggle");
   var toggleicon = document.getElementById("toggleicon");
   
    if (mode) {
        $('body').addClass(mode);
        
        $('div.normalmode').on("click tap touchstart", function(){
         $('body').toggleClass('day');
         localStorage.setItem('mode', 'day');
         toggleicon.toggle('la-sun'); 
         toggleicon.toggle('la-moon');
         modetoggle.classList.add('nightmode');
         modetoggle.classList.remove('normalmode');
        });
        $("div.nightmode").on("click tap touchstart", function() {
         $("body").removeClass("day");
         localStorage.setItem('mode', null);
         toggleicon.toggle('la-moon');
         toggleicon.toggle('la-sun');
         modetoggle.classList.add('normalmode');
         modetoggle.classList.remove('nightmode');
        });

        if ($('body').hasClass('day')) {
         toggleicon.toggle('la-sun');
         toggleicon.toggle('la-moon');
        }
    
        else {
         toggleicon.toggle('la-moon');
         toggleicon.toggle('la-sun');
        }
    }
    
    $(".tag-icon").click(function(){
        $(this).parents("article").find(".indextags").slideToggle(500);
    });
 

Тогда этот код-мой html:

 <nav id="radio">
    <label title="day/night">
        <div class="normalmode" id="modetoggle"><span class="las la-sun" id="toggleicon"></span></div>
    </label>
</nav>
 

Для chrome переключатель значков класса span не работает, я не могу заставить его отображать луну, когда он находится в светлом режиме, и солнце, когда он находится в темном режиме. (он просто остается солнцем все время).
Мне удалось сделать это с помощью решения для непрозрачности, но оно определенно не работало в Firefox, а также не в отзывчивых системах, поскольку оно зависит от фиксированного положения переключателя.

Для Firefox и мобильных устройств нажатие на значок не изменяет цвета темы, и я думаю, что это также означает, что он вообще не изменит класс тела.

Я ломал голову над тем, что вызывает эту проблему, я изменил функции, включив нажатие и сенсорный запуск, я изменил код, чтобы быть более явным (и я чувствую, что все это стало избыточным).

Я делаю что-нибудь не так?