如何使用 jquery 或 javascript 在夜间激活自动黑暗模式？

Question

Assalamu Alaikum Warahmatullah，我想在晚上激活暗模式自动，并将在白天或早上关闭。

我的网站有一个暗模式切换代码。 它通过本地存储启用暗模式和亮模式切换。 我该如何设置它，如果是晚上，默认情况下任何用户都是黑暗的，晚上默认情况下它会亮。

通常网站带有暗模式选项，白天模式是自动选择的或默认选择的。 如果任何用户想要激活暗模式，他可以切换到暗模式。 之后他就可以改变了。

我想要具有高级选项或功能的类似功能。 从傍晚到黎明，默认为黑色或深色。 用户可以轻松更改它。 同样地，从早上到晚上都会很亮。

这是我的代码

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>

<style>
:root{
--mmm-bg-color: #EADE5A;
--body:  #fff;
}
html.is-dark{
--mmm-bg-color:#0057AF;
--body:  #000;
--text:  #fff;
}
body{
background-color: var(--body);
color: var(--text);  
}
.mmmcard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: var(--mmm-bg-color);
}
</style>

<a class='darkmode-toggle' cond='data:skin.vars.darkmode == "0px" and (data:skin.vars.userdarkmode == "1px")' href='javascript:;' name='a' role='button'> DARK / LIGHT </a>

<div class="mmmcard">
<h3>Card 1</h3></div>
<p style="font-size:15px; margin-top: 25px;"> 
This is an example of Dark Mode. I want to take it next level.
</p>

<script type='text/javascript'>
$("html").each(function() {
    var e = $(this);
    darkMode = "undefined" != typeof darkMode && darkMode, userDarkMode = "undefined" == typeof userDarkMode || userDarkMode, 1 != darkMode && 0 != userDarkMode && ("dark" == localStorage.themeColor && e.addClass("is-dark"), $(".darkmode-toggle").on("click", function() {
        "dark" != localStorage.themeColor ? (e.addClass("is-dark"), localStorage.themeColor = "dark") : (e.removeClass("is-dark"), localStorage.themeColor = "light")
    }))
});
</script>

如何仅使用 Javascript 或 Jquery 来执行此操作？

Answer 1

您可以在里面编写逻辑或使用三元运算符。 此外，您可以使用 moment.js，但此实现没有库

(function() {
  if(localStorage.getItem("selectionMode") === null || localStorage.getItem("selectionMode") === "undefined" || localStorage.getItem("selectionMode") === "auto") {
    autoSelection();
  }
})();

function setMode(mode, selectionMode) {
  localStorage.setItem("themeColor", mode);
  localStorage.setItem("selectionMode", selectionMode);
  document.getElementsByTagName("html")[0].setAttribute("class", "is-" + mode);
}

function autoSelection() {
  localStorage.setItem("selectionMode", "auto");
  if(new Date().getHours() >= 18 || new Date().getHours() <= 6) {
      setMode('dark', 'auto');
  } else {
      setMode('light', 'auto');
  }
}

使用setMode(mode, selectionMode)进行手动切换

完整代码如下

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
    html.is-dark {
      --var-text-color: gray;
    }
    html.is-light {
      --var-text-color: black;
    }
    .text {
      color: var(--var-text-color);
    }
    </style>
</head>
<body>
    <button onclick="themeSwitcher()">Change Theme</button>
    <p class="text">Test text</p>
</body>
</html>

JS：

(function() {
  if(localStorage.getItem("selectionMode") === null || localStorage.getItem("selectionMode") === "undefined" || localStorage.getItem("selectionMode") === "auto") {
    autoSelection();
  }
})();

function setMode(mode, selectionMode) {
  localStorage.setItem("themeColor", mode);
  localStorage.setItem("selectionMode", selectionMode);
  document.getElementsByTagName("html")[0].setAttribute("class", "is-" + mode);
}

function autoSelection() {
  localStorage.setItem("selectionMode", "auto");
  if(new Date().getHours() >= 18 || new Date().getHours() <= 6) {
      setMode('dark', 'auto');
  } else {
      setMode('light', 'auto');
  }
}

function themeSwitcher() {
    if(localStorage.getItem("themeColor") === "dark") {
    setMode('light', 'manual');
  } else {
    setMode('dark', 'manual');
  }
}

如何使用 jquery 或 javascript 在夜间激活自动黑暗模式？

问题描述

1 个解决方案

解决方案1
1 2022-09-11 14:11:41

如何使用 jquery 或 javascript 在夜间激活自动黑暗模式？

问题描述

1 个解决方案

解决方案1 1 2022-09-11 14:11:41

解决方案1
1 2022-09-11 14:11:41