nightwatch - 如何在博客或网站中应用黑暗或夜间模式？

Question

我想要黑暗模式或夜间模式的 html js、java 和 css，在刷新页面时不会关闭，并且在再次按下按钮之前保持黑暗、明亮或夜间模式。

Answer 1

我将在这里为博主编写一些代码，以便在自己的博客上应用夜间模式...在我的博客Science in Hindi 中查看此内容运行良好.. 100% 工作，当您刷新页面时，黑暗模式不会关闭..刷新页面时不会关闭，并且在再次按下按钮之前保持黑暗或明亮或夜间模式。

<!-- Theme Functions JS -->
<script type='text/javascript'>
//<![CDATA[
function retheme() {
  var cc = document.body.className;
  if (cc.indexOf("darktheme") > -1) {
    document.body.className = cc.replace("darktheme", "");
    if (opener) {opener.document.body.className = cc.replace("darktheme", "");}
    localStorage.setItem("preferredmode", "light");
  } else {
    document.body.className += " darktheme";
    if (opener) {opener.document.body.className += " darktheme";}
    localStorage.setItem("preferredmode", "dark");
  }
}
(
function setThemeMode() {
  var x = localStorage.getItem("preferredmode");
  if (x == "dark") {
    document.body.className += " darktheme";
  }
})();
//]]>
</script>

<!-- theme switch is a button icon adjust this as your icon stylesheet -->
#theme-switch{font-size:20px;position:absolute;top:0;right:35px;z-index:19}
<!-- Here is your stylesheet for dark mode editd these colors and style name except body darktheme -->
body.darktheme{color:#fff;background-color:#000}
body.darktheme .your-element-name{color:#fff;background-color:#000}
body.darktheme .lin-element-name a{color:#fff;background-color:#000}
body.darktheme #your-element-name{color:#fff;background-color:#000}
body.darktheme your-element-name ul li a{color:#fff;background-color:#000}

<div id='theme-switch'>
<a class='fa fa-adjust' href='javascript:void(0);' onclick='retheme()' title='Change Theme'/>
    </div>