如何根据用户使用JS的时间将lite模式更改为dark模式？

Question

How can I change the lite mode to dark mode according to the user's time using JS ?

// I'm working with jQuery
$(document).ready(function(){
   $('.toggle').click(function(){

    $('body').toggleClass('dark')
       $('.row1').toggleClass('dark')
       $('.row2').toggleClass('dark')
       $('.row3').toggleClass('dark')

i don't have any error

Answer 1

Something like this, using CSS variables to simplify the js.

 $(function() { var hour = (new Date).getHours(); if (hour >= 16) { $('.wrapper').removeClass('light').addClass('dark'); } else { $('.wrapper').removeClass('dark').addClass('light'); } console.log(hour); });

 html, body { height: 100%; } .light { --main-bg-color: #eee; --main-tx-color: #000; } .dark { --main-bg-color: #222; --main-tx-color: #555; } .wrapper { width: 100%; height: 100%; background: var(--main-bg-color); } h2 { color: var(--main-tx-color); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper light"> <h2>SOMETHING HERE</h2> </div>