Нужна помощь в кодировании ночного режима WordPress Webiste, который будет автоматически запускаться с 7 вечера до 7 утра (как Instagram), но для моего сайта

Question

Я хочу иметь код javascript, который проверяет, является ли текущее время между 7 вечера и 7 утра. Если это так, он должен изменить цвет фона на моем веб-сайте на X. Если текущее время не между 7 вечера и 7 утра, цвет фона должен быть оригиналом темы WordPress. Время должно быть автоматически известно из браузера пользователя и в соответствии с этим функция должна сработать.

Я видел этот код онлайн, он запускает время пользователя

<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'moment.min.js';?>"></script>
<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'moment-timezone.js';?>"></script>
<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'moment-timezone-data.js';?>"></script>
<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'jquery-1.9.0.min.js';?>"></script>
<script type="text/javascript" src="<?php echo plugin_dir_url( __FILE__ ) . 'jstz-1.0.4.min.js';?>"></script>

<script type="text/javascript">
$(document).ready(function() {
  var tz = jstz.determine();
  var current_time= moment.tz().format('MMMM Do YYYY, h:mm:ss a');;
  alert(current_time);
});

файлы, необходимые для запуска времени Загрузка необходимых файлов

Если у вас есть другой способ, не стесняйтесь предложить

Answer 1

Это должно быть довольно просто с некоторыми основами c javascript и jquery:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

   // get today's info

   var d = new Date();

   // get the hour of the day - between 1 & 24

   var time = d.getHours();
   
   // check if hour is at 7pm or later

   if (time >= 19) { 

     $('.background').css('background-color', '#000');
     
     // check if time is 7am or earlier

   } else if (time <= 7) {

     $('.background').css('background-color', '#000');
   } else {
     
     // you can remove this else statement is meant to demonstrate what would happen between 7am and 7pm if there was not a default
     
     $('.background').css('background-color', 'orange');
   
   }

});

.background {

width: 500px;
height: 500px;
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="background"></div>