How to activate auto dark mode at night using jQuery or JavaScript?

Ibrahim Adorer 0
Viewed 55

I want to activate dark mode auto at night and will be off at day or morning.

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?

darkmode local-storage jquery javascript html
1 Answers

You can write the logic inside or use the ternary operator. Also, you can use moment.js, but this implementation is without a library

(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

Full code below

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');
  }
}
trane0
Related