javascript - 如何覆盖CSS配色方案设置

在HTML中。
现在我知道我们可以要求CSS在用户更改系统配色方案时做一些事情，例如

@media (prefers-color-scheme: dark)

但是，如果我想覆盖该设置，例如在夜间需要浅色方案，但又不想更改系统颜色方案设置，该如何使用JavaScript或jQuery方式来欺骗CSS（即使在系统是浅色的，还是相反的），因此我可以通过单击某些元素来切换网页配色方案？

最佳答案

您应该首先以24小时格式获取当前时间，如下所示：

var dayNight = (new Date()).getHours();

现在，您很可能有2种具有背景色的类，其中1种是白天，而1种是夜晚。

因此，您可以使用if/else语句来决定何时使用JQuery添加或删除类。

因此，在我的示例中，当.dayNight大于或等于7（上午7点）并且小于19（下午7点）时，它将添加.day类并删除。night类。

当.dayNight大于或等于0（午夜12点）并且小于7（上午7点）时，它将添加.night类并删除.day类。

同样，当它大于或等于19（晚上7点）并且小于或等于23（晚上11点）时，它也会执行上述操作。在上面的代码中，我们已经分配了0（午夜12点），因此我们可以在此处将其设置为23（晚上11点）。

尝试这个：

var dayNight = (new Date()).getHours();

if(dayNight>=7 && dayNight < 19) {
  $( "#display" ).removeClass( "night" ).addClass( "day" );
}

if((dayNight>=0 && dayNight<7) || (dayNight>=19 && dayNight <=23)) {
	$( "#display" ).removeClass( "day" ).addClass( "night" );
}

.day {
  background-color: blue;
  color: white;
}

.night {
  background-color: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display">
Hello!
</div>