window.matchMedia Javascript, чтобы запомнить выбор пользователя при смене страницы

Question

У меня проблемы с предпочтительной цветовой схемой с логикой c, которую я пытаюсь достичь. Например, с помощью схемы prefers-color у меня на сайте есть переключатель, который переопределяет, что пользователь предпочитает черный цвет при использовании светлого режима, и наоборот. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу переключить ее так, что, когда пользователь меняет переключатель, чтобы установить его на цветовую тему ОС, когда он переключает страницы, тема переключается на предпочитаемую цветовую схему. У меня уже есть настройка локального хранилища и переменные, называемые типом темы и включенными.

Когда я закомментирую функцию определения цветовой схемы, локальное хранилище запоминает желаемую пользователем настройку темы. При отсутствии комментариев он переопределяет и всегда выбирает цветовую схему темы. Как я могу заставить мой logi c работать правильно, когда на первой точке входа пользователя перед созданием локального хранилища он читает ОС темы, но если пользователь меняет тему на черный, и наоборот, ОС не переопределяет когда на странице меняются?

Спасибо.

Итак, detectColorScheme проверяет пользовательскую тему ОС.

function detectColorScheme(){

var on = 1;
on = 1;

if (window.matchMedia('(prefers-color-scheme: dark)').matches && on <= 1) {
  if (on = 1 ) {
      on = 2;
      darkmode();
      console.log("OS Setting DARK MODE");
  }

}

 if (window.matchMedia("(prefers-color-scheme: light)").matches ) {
   if (on = 1) {
     lightmode();
     console.log("OS Setting LIGHT MODE");
   }
}

}

Затем в начале файла javascript Я делаю следующее:

document.body.style.backgroundColor = "";

if (localStorage.themepref == 1 ) {
    detectColorScheme();
    document.body.style.backgroundColor = "#FFF";
    lightmode();
}
else {
    detectColorScheme();
    document.body.style.backgroundColor = "#0a0a0a";
    darkmode();
    localStorage.themepref = 2;
}


window.onload = function() {
  console.log('First');

  if (event.target.readyState === 'loading') {
    detectColorScheme();
    $('body').css({ background: ''});
    document.body.style.backgroundColor = "inherit";

   if(lightmodeON == true) {
     detectColorScheme();
     $('body').css({background: "#fbfcfd"});
     document.body.style.backgroundColor = "#FFF";
   }

   if(lightmodeON == false) {
     detectColorScheme();
     $('body').css({background: "#0a0a0a"});
     document.body.style.backgroundColor = "#0a0a0a";
   }
}
};

И наконец

document.addEventListener("DOMContentLoaded", function() {

    window.scrollTo(0, 0);
    $(window).scrollTop( $("#top").offset().top );
    $(document).scrollTop(0);

  document.body.style.backgroundColor = "";

  if (document.readyState === 'complete') {


    if(lightmodeON == true) {
      $('body').css({background: "#fbfcfd"});
      console.log('loading white bg');
    }

    if(lightmodeON == false) {
      $('body').css({background: "#0a0a0a"});
      console.log('loading black bg');
    }
  }


  if (typeof (Storage) !=="undefined") {
    if (localStorage.themepref == 1 ) {
      lightmode();
    }
    else {
      darkmode();
      localStorage.themepref = 2;
    }

    if(lightmodeON == true) {
      $('body').css({background: "#fbfcfd"});
      console.log('loading fffwhite bg');
    }

    if(lightmodeON == false) {
      $('body').css({background: "#0a0a0a"});
      console.log('loading black bg');
    }
  }

Answer 1

Я сделал это небольшое усилие. То, что я делаю, это:

Когда пользователь загрузит сайт в первый раз, localStorage будет пуст, поэтому мы настроим тему в соответствии с ОС, но затем, если пользователь будет играть с нашим переключателем, который, если в этом случае световой режим в противном случае будет темным, мы также сохраним это в локальном хранилище, и в следующий раз, когда пользователь посетит нашу страницу, мы проверим его предпочтения из локального хранилища, никогда не вернемся go к теме ОС ,

Пожалуйста, посмотрите и дайте мне знать, если это будет полезно. Это не будет работать здесь, так как localStorage не будет поддерживаться здесь. Пожалуйста, скопируйте и протестируйте в своем браузере.

<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<label style="color:yellow;">IsLightMode: </label>
	<input id="toggleCheck" type="checkBox" onclick="toggle()" />
	<script>
		var lightmodeOn = true;
		function changeColorOfBackground(lightmodeOn) {
			if(lightmodeOn == true) {
			  // you can call your lightmode function here if want to set other things too.
			  $('body').css({background: "#fbfcfd"});
			  console.log('loading white bg');
			}

			if(lightmodeOn == false) {
			  // you can call your darkmode function here if want to set other things too.
			  $('body').css({background: "#0a0a0a"});
			  console.log('loading black bg');
			}
		}
		function toggle() {
			lightmodeOn = !lightmodeOn;
			changeColorOfBackground(lightmodeOn);
			localStorage.themepref = lightmodeOn?1:2;
		}
		
		document.addEventListener("DOMContentLoaded", function() {
			
	        //if it is not set in localStorage only then check OS theme otherwise always load from localStorage
			if(localStorage.themepref === null) {
				//if windows is light, then we should go with dark theme
				if (window.matchMedia('(prefers-color-scheme: light)').matches) {
					lightmodeOn = false;
				}
			}
			else if (localStorage.themepref == 2 ) {
				lightmodeOn = false;
			}
			
			if(lightmodeOn) {
				$('#toggleCheck').prop('checked',true);
			}
			
			changeColorOfBackground(lightmodeOn);
		});
	</script>
</body>
</html>