在深色模式下使用JavaScript更改元主题颜色?

时间:2020-08-02 23:17:40

标签: javascript

如何将这两个脚本合并为一个函数,

<script>//<![CDATA[
function LMcheckCheckbox(){
    document.querySelectorAll(".checkbox").forEach(function(e) {      
       "darkmode"===localStorage.getItem("mode")?e.checked=!0:e.checked=!1
        })
    }
function darkMode(){
     localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),
     "darkmode"===localStorage.getItem("mode")?document.querySelector("body").classList.add("darkmode"):document.querySelector("body").classList.remove("darkmode"),
     LMcheckCheckbox()
 }
 function darkModeHide(){
      document.querySelectorAll(".darkmode-switch").forEach(function(e){
           e.parentNode.removeChild(e)
      })
 }
LMcheckCheckbox(),
"undefined"==typeof AzidBloggerSetting
 &&(AzidBloggerSetting={tombolDarkmode:!0}),           
 0==AzidBloggerSetting.tombolDarkmode&&darkModeHide();
    //]]>
</script>

和此处用于更改元主题颜色的脚本

$("meta[name='theme-color']").attr('content', '#333333');

如何将第二个脚本插入第一个脚本?我想在第一个脚本处于活动状态时更改meta主题颜色。

1 个答案:

答案 0 :(得分:0)

您需要找到激活暗模式的位置,然后将代码放入其中。(对代码进行最小化以首先查看发生了什么事情

我建议您在进入代码之前对javascript有基本的了解!

据我了解,这就是您想要做的:

function LMcheckCheckbox() {
  document.querySelectorAll(".checkbox").forEach(function(e) {
    "darkmode" === localStorage.getItem("mode") ? e.checked = !0 : e.checked = !1
  })
}


function darkMode() {
// this is seemingly where the dark mode is being applyed so :
$("meta[name='theme-color']").attr('content', '#333333');
  localStorage.setItem("mode", "darkmode" === localStorage.getItem("mode") ? "light" : "darkmode"), "darkmode" === localStorage.getItem("mode") ? document.querySelector("body").classList.add("darkmode") : document.querySelector("body").classList.remove("darkmode"), LMcheckCheckbox()
}

function darkModeHide() {
  document.querySelectorAll(".darkmode-switch").forEach(function(e) {
    e.parentNode.removeChild(e)
  })
}
LMcheckCheckbox(), "undefined" == typeof AzidBloggerSetting && (AzidBloggerSetting = {
  tombolDarkmode: !0
}), 0 == AzidBloggerSetting.tombolDarkmode && darkModeHide();