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

Question

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

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

谢谢。

因此 detectColorScheme 检查用户 OS 主题。

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 将是空的，因此我们将根据 OS 设置主题，但是如果用户使用我们的切换开关，如果打开则亮模式，否则暗模式，然后我们还将把它保存在本地存储中，下次当用户访问我们的页面时，我们将从本地存储中检查它的偏好，永远不会回到 OS 主题。

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

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

window.matchMedia Javascript to remember user selection on page change

javascript

css

jquery

background

local-storage