Темный режим css сохранение выбора

Question

Я недавно сделал тёмный режим на моем сайте, вот так>> 1001 *http://themes.semicolonweb.com/html/canvas/demo-articles.html

Но, как вы можете видеть, когда вы обновите sh страницу, она не сохранит ваш выбор Я хочу сохранить выбор с помощью js и localalstorage, но не могу заставить его работать. Если у вас есть предложения для местного хранилища, вот мой код:

    jQuery(document).ready( function($){
    function modeSwitcher( elementCheck, elementParent ) {

        if( elementCheck.filter(':checked').length > 0 ) {
            elementParent.addClass('dark');
            $('.mode-switcher').toggleClass('pts-switch-active');
        } else {
            elementParent.removeClass('dark');
            localStorage.toggled = "";
            $('.mode-switcher').toggleClass('pts-switch-active', false);
        }

    }

    $('.pts-switcher').each( function(){
        var element = $(this),
            elementCheck = element.find(':checkbox'),
            elementParent = $('body');

        modeSwitcher( elementCheck, elementParent );

        elementCheck.on( 'change', function(){
            modeSwitcher( elementCheck, elementParent );
        });
    });
});

Answer 1

Просто дайте вам представление,

в темном режиме, нажмите кнопку, чтобы сохранить переменную локального хранилища, и то же самое для светлого режима. на любую тему, выделение удалить другую локальную переменную хранения. Теперь на document.ready проверьте переменную и примените класс или CSS соответственно. Из-за ограничения фрагмента вы не можете видеть этот код в действии здесь, но вы можете просто сохранить его на своем локальном компьютере и поиграть с ним, или просто проверить это codepen Ссылка .

$(document).ready(function(){
  		$('#dark').click(function(){
			localStorage.setItem('dark',true);
			localStorage.removeItem('light', false);	
			$('body').css("background-color", '#000');		
  		});
  		$('#light').click(function(){
			localStorage.setItem('light',true);
			localStorage.removeItem('dark',false);	
			$('body').css("background-color", '#fff');
  		});
  		var getLocalDarkVar = localStorage.getItem('dark');
  		if(getLocalDarkVar == "true") {
  			console.log("dark Theme");
  			$('body').css("background-color", '#000');
  		}else {
  			console.log("Light Theme");
  			$('body').css("background-color", '#fff');
  		}

  	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="dark">Dark Mode</button>
	<button id="light">Light mode</button>