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

Question

Assalamu Alaikum Warahmatullah, I want to activate dark mode auto at night and will be off at day or morning. Assalamu Alaikum Warahmatullah，我想在晚上激活暗模式自动，并将在白天或早上关闭。

I have a code of dark mode toggle of my website.我的网站有一个暗模式切换代码。 It enables dark mode and light mode toggle with localstorage.它通过本地存储启用暗模式和亮模式切换。 How can I set it like that, if it's night, it will be dark by default for any users and at night it will be light by default.我该如何设置它，如果是晚上，默认情况下任何用户都是黑暗的，晚上默认情况下它会亮。

Normally website with dark mode option, day mode is auto selected or default selected.通常网站带有暗模式选项，白天模式是自动选择的或默认选择的。 If any user want to activate dark mode, he can toggle to dark mode.如果任何用户想要激活暗模式，他可以切换到暗模式。 After he can change.之后他就可以改变了。

I want something like that with advance option or features.我想要具有高级选项或功能的类似功能。 From Evening to Dawn, it will be black or dark by default.从傍晚到黎明，默认为黑色或深色。 And user can change it easily.用户可以轻松更改它。 By the same way, it will be light from Morning to evening.同样地，从早上到晚上都会很亮。

Here's My Code这是我的代码

<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>

How Can I Do This using only Javascript or Jquery?如何仅使用 Javascript 或 Jquery 来执行此操作？

Answer 1

You can write the logic inside or use the ternary operator.您可以在里面编写逻辑或使用三元运算符。 Also, you can use moment.js, but this implementation is without a library此外，您可以使用 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');
  }
}

Use setMode(mode, selectionMode) for manual switching使用setMode(mode, selectionMode)进行手动切换

Full code below完整代码如下

HTML: 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: 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