window.matchMedia Javascript 在页面更改时记住用户选择答案

【问题标题】：window.matchMedia Javascript to remember user selection on page changewindow.matchMedia Javascript 在页面更改时记住用户选择
【发布时间】：2020-05-05 04:52:20
【问题描述】：

我在使用我想要实现的逻辑的偏好颜色方案时遇到问题。例如，使用prefers-color-scheme，我在我的网站上有一个切换，它覆盖了用户在使用浅色模式时更喜欢黑色，反之亦然。我遇到的问题是我无法切换它，因此当用户更改切换以将其设置为操作系统颜色主题时，当他们切换页面时，主题切换回首选配色方案。我已经有了本地存储设置和名为主题类型的变量。

当我注释掉检测配色方案功能时，本地存储会记住用户所需的主题设置。取消注释时，它会覆盖并始终选择主题操作系统配色方案。我怎样才能让我的逻辑在创建本地存储之前在用户的第一个入口点上正常工作，它会读取主题操作系统，但如果用户将主题更改为黑色，反之亦然，操作系统不会在页面上覆盖改变？

谢谢。

因此，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');
    }
  }

【问题讨论】：

没有足够的代码让我理解它，而是你的代码中有一个小错误，在你的函数'detectColorScheme'中，你正在做if（on = 1），使用单个' =' 而不是 '=='。
@HamzaArshad 我用更多代码编辑了帖子。希望它能提供见解并感谢您发现我的错误！
先生让我简单解释一下，我们在这里试图实现的目标，加载页面，您要检查本地存储并根据保存偏好调整主题。但是稍后用户可以切换主题并且它也必须更新本地存储？对吗？
是的。因此，如果我禁用 detectColorScheme() 功能，无论操作系统设置如何，站点都会加载黑色。我希望站点首先检测操作系统设置，但是如果用户选择更改主题，则调整本地存储，因为他们更喜欢黑白操作系统主题但保存他们的偏好并且没有检测配色方案功能总是在首次加载站点后覆盖用户主题首选项（保存本地存储）
试图标记为 stackoverflow.com/questions/56300132/… 的副本，但由于赏金而不能。

标签： javascript jquery css background local-storage

【解决方案1】：

我做了这个小小的努力，我正在做的是：

当用户第一次加载网站时，localStorage 将为空，因此我们将根据操作系统设置主题，但如果用户使用我们的切换开关，如果打开则为 lightmode，否则为 darkmode，然后我们也将其保存在localstorage 并且下次用户访问我们的页面时，我们将从本地存储中检查它的首选项，永远不会回到操作系统主题。

请看一下，如果有帮助，请告诉我。它在这里不起作用，因为这里不支持 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>

【讨论】：