window.matchMedia Javascript以记住页面更改时的用户选择

我对我想要达到的逻辑偏好的配色方案有困难。例如，使用“首选颜色”方案，我的网站上有一个切换，该切换覆盖了用户在使用灯光模式时首选黑色，反之亦然。我遇到的问题是我无法切换它，因此当用户更改切换以将其设置为OS颜色主题时，当他们切换页面时，主题将切换回首选颜色方案。我已经有了本地存储设置和名为theme type和on的变量

当我注释掉detect color scheme函数时，本地存储器会记住用户想要的主题设置。未注释时，它会覆盖并始终选择主题os配色方案。在创建本地存储之前，当用户的第一个入口点读取主题操作系统时，如果用户将主题更改为黑色，反之亦然，则操作系统在页面更改时不会覆盖，那么我如何使逻辑正常工作

谢谢

因此DetectColor方案检查用户的操作系统主题

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");
  }

}

然后在javascript文件的开头，我执行以下操作：

document.body.style.backgroundColor=“”；
if（localStorage.themepref==1）{
检测配色方案（）；
document.body.style.backgroundColor=“#FFF”；
lightmode（）；
}
否则{
检测配色方案（）；
document.body.style.backgroundColor=“#0A0A”；
暗模式（）；
localStorage.themepref=2；
}
window.onload=函数（）{
console.log（'First'）；
如果（event.target.readyState==='loading'）{
检测配色方案（）；
$（'body'）.css（{background:'}）；
document.body.style.backgroundColor=“继承”；
if（lightmodeON==true）{
检测配色方案（）；
$（'body'）.css（{背景：#fbfcfd}）；
document.body.style.backgroundColor=“#FFF”；
}
if（lightmodeON==false）{
检测配色方案（）；
$（'body'）.css（{背景：#0a0a“}）；
document.body.style.backgroundColor=“#0A0A”；
}
}
};我已经完成了这一小小的努力，我正在做的是：

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

请看一下，如果有什么帮助请告诉我。它在这里不起作用，因为本地存储在这里不受支持。请在浏览器中复制和测试



测试
孤岛模式：
var-lightmodeOn=true；
背景的功能更改颜色（lightmodeOn）{
if（lightmodeOn==true）{
//如果您还想设置其他内容，可以在此处调用lightmode函数。
$（'body'）.css（{背景：#fbfcfd}）；
console.log（'loading white bg'）；
}
if（lightmodeOn==false）{
//如果您还想设置其他内容，可以在此处调用darkmode函数。
$（'body'）.css（{背景：#0a0a“}）；
console.log（'loading black bg'）；
}
}
函数切换（）{
lightmodeOn=！lightmodeOn；
改变背景颜色（lightmodeOn）；
localStorage.themepref=lightmodeOn？1:2；
}
document.addEventListener（“DOMContentLoaded”，function（））{
//如果未仅在localStorage中设置，请检查操作系统主题，否则始终从localStorage加载
if（localStorage.themepref==null）{
//如果窗户是亮的，那么我们应该选择暗的主题
if（window.matchMedia（'（首选颜色方案：灯光））.matches）{
lightmodeOn=false；
}
}
else if（localStorage.themepref==2）{
lightmodeOn=false；
}
如果（lightmodeOn）{
$（'#toggleCheck'）.prop（'checked'，true）；
}
改变背景颜色（lightmodeOn）；
});
我已经完成了这一小小的努力，我正在做的是：

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

请看一下，如果有什么帮助请告诉我。它在这里不起作用，因为本地存储在这里不受支持。请在浏览器中复制和测试



测试
孤岛模式：
var-lightmodeOn=true；
背景的功能更改颜色（lightmodeOn）{
if（lightmodeOn==true）{
//如果您还想设置其他内容，可以在此处调用lightmode函数。
$（'body'）.css（{背景：#fbfcfd}）；
console.log（'loading white bg'）；
}
if（lightmodeOn==false）{
//如果您还想设置其他内容，可以在此处调用darkmode函数。
$（'body'）.css（{背景：#0a0a“}）；
console.log（'loading black bg'）；
}
}
函数切换（）{
lightmodeOn=！lightmodeOn；
改变背景颜色（lightmodeOn）；
localStorage.themepref=lightmodeOn？1:2；
}
document.addEventListener（“DOMContentLoaded”，function（））{
//如果未仅在localStorage中设置，请检查操作系统主题，否则始终从localStorage加载
if（localStorage.themepref==null）{
//如果窗户是亮的，那么我们应该选择暗的主题
if（window.matchMedia（'（首选颜色方案：灯光））.matches）{
lightmodeOn=false；
}
}
else if（localStorage.themepref==2）{
lightmodeOn=false；
}
如果（lightmodeOn）{
$（'#toggleCheck'）.prop（'checked'，true）；
}
改变背景颜色（lightmodeOn）；
});
没有足够的代码让我能够理解它，相反，您的代码中有一个小错误，在函数“detectColorScheme”中，您正在执行if（on=1），使用单个“=”而不是“=”。@HamzaArshad I编辑
 if (window.matchMedia("(prefers-color-scheme: light)").matches ) {
   if (on = 1) {
     lightmode();
     console.log("OS Setting LIGHT MODE");
   }
}