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

Question

如何根据用户使用 JS 的时间将精简模式更改为暗模式？

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

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

我没有任何错误

Answer 1

像这样，使用 CSS 变量来简化 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>