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

Question

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

@media (prefers-color-scheme: dark)

但是，如果我想覆盖该设置，就像我在晚上需要浅色配色方案，但我不想更改我的系统配色方案设置，是否有任何 JavaScript 或 jQuery 方法来欺骗 CSS(继续黑暗即使在系统亮起时也能 parking ，或在对面)，所以我可以通过单击某些元素来切换网页配色方案？

Answer 1

您应该首先以 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>